Html 放置一个<；p>；在一个居中的<；h1>；

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

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

标题2014年6月27日

这里有一个窍门，你可以试试：

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

演示： 由于

col-md-12

具有

position:relative

您可以绝对定位

p

，并使用负边距固定垂直对齐（根据您的行高进行调整）

---

也可以使用内置引导

.center

类而不是

.text center

类。

不是真正的引导答案（它可能已经有插入类来处理此问题）

但你可以用负的保证金抵消日期：

标题2014年6月27日
.中心{
文本对齐：居中；
}
.中心h1{
显示：内联；
}

---

在我的示例中，我将

p

更改为

span

，因为它已经是内联的，但取决于HTML结构的上下文，如果

p

在语义上更正确（我觉得日期不需要段落）

可能会重新组织一点，并将日期作为span放在标题内：

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

---

请出示您的css。另外，它与引导有什么关系？通过查看类“col-md-12”，这就是引导。难道你看不出有内联css样式吗？我用Bootstrap3尝试了你的html，但没有任何效果，这就是为什么我问的原因。比我的解决方案更好@用阿斯蒂克戳一下，但原理是一样的。谢谢！这就是我需要的答案！

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

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

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

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