html - 在居中的 <h1> 旁边放置一个 <p>

Question

下面是将所有内容置于中心的代码。但现在我只想将标题居中并通过不将标题向左移动来附加日期。标题必须保留在中间，日期附加在后面。我怎样才能做到这一点？

<div class="row center">
    <div class="col-md-12">
        <h1 style="display:inline;">Title</h1><p style="display:inline;"> 27th June 2014</p>
    </div>
</div>

Answer 1

这里有一个技巧，你可以试试:

<div class="row text-center">
    <div class="col-md-12">
        <h1 class="title">Title</h1>
        <p>27th June 2014</p>
    </div>
</div>

CSS:

.text-center .title {
    display: inline-block;
}
.text-center .title + p {
    position: absolute;
    display: inline-block;
    top: 50%;
    margin: -5px 0 0 10px; /* adjust margin-top based on your line height */
}

演示:http://plnkr.co/edit/tFOrJUP4g8Pr0LxLWN9w?p=preview

因为 col-md-12 有 position: relative 你可以绝对定位 p ，并用负边距修复垂直对齐(调整你的行高)。

此外，您还可以在 Bootstrap .text-center 类中使用构建类，而不是 .center 类。