集中链接

Question

我正试图在网页上设置一个有条理的READ MORE链接，但还没有成功。该链接仍位于页面左侧：

我正在使用Twitter Boostrap，这就是HTML的样子：

<div class="container">
<h2 class="more"><a href="#">read more</a></h2>
</div> <!--end container-->

CSS：

#process .more {
    border: 1px solid #392e2e;
    padding: 15px;
    display: inline-block;
    margin: 0 auto;
    }

#process .more a {
    color: #392e2e;
    text-decoration: none;
    text-align: center;
    }

我也尝试使用Bootstrap的class =“text-center”，但这也不起作用。 Here's指向我项目的链接，您可以在页面底部看到READ MORE链接问题。

感谢您的帮助。

Answer 1

使用文本中心类，但在父div容器上使用它作为链接：

<div class="container text-center">
    <h2 class="text-center more"><a href="#">read more</a></h2>
</div>

Answer 2

你可以用两种方式做到：

1。块显示方法：

#process .more a {
    color: #392e2e;
    text-decoration: none;
    display:block;
    width:100px; //Adjustable and depends on you
    margin:0 auto;
}

或：

2。外部元素对齐：

h2.more {
  display:block;
  text-align:center;
}

h2.more a {
  display:inline-block;
  width:auto;
}      

以下是2个例子的小提琴：Example

实际上有其他方法可以使用CSS，但这两种方法最常用。