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

我有文本，我想显示如下：

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并在标题中加上。标题显示良好，但正文文本每行显示一个单词

---

有什么有用的提示吗？

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

CSS:

HTML:

---

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

CSS:

HTML:

---

您可以通过将文本绝对定位在包含标题的元素中来完成您想要做的事情

HTML:

小提琴：

---

*注意：我只在Firefox中测试过这个。另外，需要注意的是，如果在元素下面设置了内容，那么元素高度可能会成为一个问题。为了清除高度，您需要应用底部边距或填充，因为绝对定位文本不会对元素的整体高度产生任何影响。正如您在这里看到的：

您可以通过将文本绝对定位在包含标题的元素中来完成所要做的事情

HTML:

小提琴：

---

*注意：我只在Firefox中测试过这个。另外，需要注意的是，如果在元素下面设置了内容，那么元素高度可能会成为一个问题。为了清除高度，您需要应用底部边距或填充，因为绝对定位文本不会对元素的整体高度产生任何影响。正如你在这里看到的：

好吧，假设我知道我想要的宽度是200像素，我的窍门是我不知道宽度。我希望它是从数据库记录中提取的任何文本的宽度。@一旦从database@Jay此外，您可以使用服务器端语言构建具有内联宽度样式的元素。看起来很混乱，必须用CSS和JS完成一半的布局，但我想这总比根本无法完成要好。我们正在计算服务器端的宽度：我不知道我怎么能做到。我不知道ASP中有什么功能（在本例中）可以计算在浏览器中显示的字符串宽度。我认为这是不可能的，因为我甚至不知道它将使用什么字体。当然，我可以估计，如果在服务器上以某种随机字体显示，宽度会是多少，或者只是计算字符数，然后乘以某个平均数。好吧，假设我知道我想要的宽度是200像素，我的窍门是我不知道宽度。我希望它是从数据库记录中提取的任何文本的宽度。@一旦从database@Jay此外，您可以使用服务器端语言构建具有内联宽度样式的元素。看起来很混乱，必须用CSS和JS完成一半的布局，但我想这总比根本无法完成要好。我们正在计算服务器端的宽度：我不知道我怎么能做到。我不知道ASP中有什么功能（在本例中）可以计算在浏览器中显示的字符串宽度。我认为这是不可能的，因为我甚至不知道它将使用什么字体。当然，我可以估计，如果在服务器上用一些随机字体显示，宽度会是多少，或者只是计算字符数，然后乘以一些平均数。嗯，这很吸引人，但并不完全如此。显示模式的组合确实使正文文本在标题下换行。但我想在父对象中居中整个块，使用这些显示模式无法使其居中。我不太明白为什么会这样。嗯，这很吸引人，但不是很吸引人。显示模式的组合确实使正文文本在标题下换行。但我想在父对象中居中整个块，使用这些显示模式无法使其居中。我不太明白为什么它会这样工作。

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

#header{
    background: blue;
}

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

    </div>
</div>

<h1>
    SOME HEADING TEXT

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

</h1>

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