圍繞一個班級內的邊界

Question

這可能是一個可笑的問題，但由於某種原因，我似乎無法對齊這些人，使他們完全居中。出於某種原因，邊框似乎在左邊，不知道爲什麼。有人可以幫助...

jsfiddle。 http://jsfiddle.net/greggy_coding/b3k9Lhfz/4/

的HTML和CSS

<div class="container-bottom"> 
      <a href="http://www.google.com" target="_blank" class="linkbutton">LEARN MORE</a> 
      <h4><span></span>Click to find out more </h4> 
      </div> 


body { 
    background: #fff; 
} 

.container-bottom h4 { 
    font-weight: 500; 
    font-size : 16px ; 
    text-align:center; 
    color: #fff; 
    margin-left : auto; 
    margin-right : auto; 
} 

.linkbutton{ 
    border: 2px solid #fff; 
    padding: 10px 50px; 
    width: 50px; 
    border-radius: 30px; 
    margin: auto; 
    position: relative; 
} 
.container-bottom{ 
    background-color: #000; 
    width: 300px; 
    height:20%; 
    padding: 25px; 
    position: relative; 
    margin-left: auto ; 
    margin-right: auto ; 
    margin-top:30px; 

    } 

Answer 1

的聯繫是如此內嵌在margin: auto;沒有去上班。

改爲在父元素上使用text-align: center;。

.container-bottom { 
    . . . 
    text-align: center; 
} 

Answer 2

另一種方法是：

.linkbutton{ 
    /* You were missing this */ 
    display: block; 
    /* Need this to align your text in the middle */ 
    text-align: center; 
    border: 2px solid #fff; 
    /* Controlling your padding here */ 
    padding: 10px; 
    /* Specifying the width is important */ 
    width: 200px; 
    border-radius: 30px; 
    margin: auto; 
    position: relative; 
}