居中 link

Question

我正在尝试将带边框的 READ MORE link 在网页上居中，但尚未成功。 link 仍然位于页面左侧：

我正在使用 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 一个 link 我的项目，你可以在页面的最底部看到阅读更多 link 问题。

感谢您的帮助。

Answer 1

使用文本中心 class，但在 link 的父 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 个示例的 fiddle：Example

CSS实际上还有其他方法可以做到这一点，但这两种是最常见的。

居中 link

Centering a link

html

css

centering

twitter-bootstrap

1。分块显示方式：

2。外部元素对齐：