центрирование границы внутри класса

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; 
}