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 .center类中使用build而不是.text-center类。

Answer 2

可能会重新组织一下，并将日期作为标题内的跨度：

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

然后你的css可能是这样的：

#title {
    text-align:center;
    position:relative;
}

#title span {
    font-size:15px;
    font-weight:normal;
    position:absolute;
    bottom:4px;
}

http://jsfiddle.net/twAU3/

Answer 3

不是真正的引导答案（它可能有嵌入式类来处理这个问题）

但你可以用负余量来抵消日期：

http://jsfiddle.net/9vXaj/

<div class="row center">
    <div class="col-md-12">
        <h1>Title</h1><span class="date"> 27th June 2014</span>
    </div>
</div>

.center{
    text-align: center;
}

.center h1{
    display: inline;
}

在我的示例中，我将p更改为span，因为它已内联，但如果p在语义上更正确，则取决于HTML结构的上下文（date doesn'感觉它需要一个段落给我）

在中心</p> <h1> </h1>旁放置一个<p>

3 个答案:

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