如何在没有额外标记的情况下将内联块/浮动标头居中？

Question

我有一个可变宽度的标题，必须的背景颜色与文本一样宽（不宽）。我能想到的唯一方法（没有额外的标记）是将显示设置为内联块或将其浮动到左侧。然而问题是我无法集中标题（另一个要求）。

我到目前为止最接近的是通过在浮动标题上设置position: relative;，将其从左侧推过50％，然后将其拉回25％，带有负边距，但这不会始终使标题居中。它必须保留在文档的流程中，因此position: absolute;是另一个禁止的行为。

如果您知道使用CSS 仅 没有额外标记的方法，请告诉我（伪元素很好，我不会讨厌关于IE7的支持）！

Answer 1

使用display：table解决;在标题上（边距：0自动;）。

Answer 2

您可以将text-align:center;作为全局属性提供给body;将display:inline-block提供给您的header div。因此，它是dynamic width center的中心，如下所示：

CSS：

body{margin:0; padding:0;text-align:center}
p{text-align:left;}
.header{background:red;display:inline-block;}

请查看此示例http://jsfiddle.net/vpcXS/

Answer 3

将p标签替换为中心，因为我的标记是

<div id="header">
    <center>hello</center>
</div>

它的CSS是

body{
    width:100%;
}
#header{
    text-align:center;
}
#header center{
    display:inline-block;
    background:red;
}