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

以一个班级为中心

2 个答案: