html - 在类中居中边框

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