居中<a> div內的按鈕

Question

我似乎無法將屏幕中間的按鈕居中。

這裏是的jsfiddle：http://jsfiddle.net/c7xuo1bv/

我不知道爲什麼按鈕偏向左側。我將左右邊距設置爲自動。我認爲這可能是一個定位問題，但我試圖相對和絕對的位置，但無濟於事。

HTML：

<header> 
    <div class="background_image"> 
    </div> 
    <div class="welcome-text-container"> 
    <div class="row"> 
     <div class="welcome-text1">Welcome to Boothie!</div> 
     <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div> 
     <div class="btn-row"> 
     <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a> 
     </div> 
    </div> 
    </div> 
</header> 

CSS：

.welcome-text-container { 
    /* z index --> stack order, higher == top of stack*/ 
    z-index: 100; 
    /* relative position moes an element RELATIVE to its original position 
     ie: behind the image! 
    */ 
    position: relative; 
    padding-top: 300px; 
    padding-bottom: 200px; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.welcome-text1 { 
    text-align: center; 
    color: #FFF; 
    font-size: 40px; 
} 

.welcome-text2 { 
    text-align: center;; 
    font-size: 75px; 
    font-weight: 800; 
    color: #FFF; 
    padding-bottom: 25px; 
} 

.welcome-btn { 
    text-align: center; 
    background-color: #ecf9f8; 
    font-weight: 400; 
    font-size: 20px; 
    padding-left: 40px; 
    padding-right: 40px; 
    position: relative; 
} 

.btn-row { 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.row { 
    padding-left: 50px; 
    padding-right: 50px; 
} 

Answer 1

的text-align style影響元素的內聯內容，而不是元素本身。

你得風格移到父<div>：

.btn-row { 
    text-align: center; 
    /* ... */ 
} 

http://jsfiddle.net/c7xuo1bv/1/

Answer 2

您可以添加

.row { 
    text-align: center; 
} 

所有元素居中在一起。

DEMO