Question

我想要显示的文字如下：

SOME HEADING TEXT
And then a bunch
of text under
that wrapped to
the width of the
heading.

我的意思是，我想要一个标题下面有一些正文。我希望文本在这个块中左对齐。我希望块的宽度由标题的宽度定义。然后我希望整个块在其父级中心。

如果我知道标题是100像素，我可以写：

<div style="width: 100px;margin:0 auto">
etc.

但我不知道标题的宽度。即使它是静态的，我测量它，如果用户改变他的字体大小等，我认为这在不同的浏览器上是不可靠的。

我尝试说宽度：0并将＆amp; nbsp's放入标题中。标题显示正常，但正文显示每行一个单词。

有用的提示吗？

Answer 1

您可以通过在包含的标题元素中绝对定位文本来完成您要执行的操作。

HTML：

<h1>
    SOME HEADING TEXT

    <span>
        And then a bunch
        of text under
        that wrapped to
        the width of the
        heading.
    </span>

</h1>

CSS：

h1 { display: inline-block; position: relative; }
h1 span { text-align: center; display: block; position: absolute; font: 14px/20px Helvetica, sans-serif; }

小提琴：http://jsfiddle.net/ftkdD/1/

* 注意：我只在Firefox中对此进行了测试。此外，重要的是要注意元素高度可能会成为一个问题，如果元素下方的内容设置为清除高度，您将需要应用底部边距或填充，因为绝对定位文本将不会有任何影响元素整体高度。正如您在此处所见：http://jsfiddle.net/ftkdD/2/ *

Answer 2

这个小提琴看起来像你想要的吗？

http://jsfiddle.net/2Rc2j/3/

CSS：

#main{
    width: 200px;
    height: 50px;
    margin: 0 auto;
    background: red;
}

#header{
    background: blue;
}

HTML：

<div id="header">
    <div id="main">

    </div>
</div>

使用css的块居中，使用第一行的自然宽度

2 个答案: