html - 将居中文本添加到水平线的中间

Question

这个问题在这里已经有了答案:

CSS technique for a horizontal line with words in the middle (34 个回答)

关闭 去年。

我想知道在 xhtml 1.0 strict 中有哪些选项可以像这样在文本的两侧创建一条线:

Section one----------------------- Next section -----------------------Section two

I've thought of doing some fancy things like this:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

或者，因为上面的对齐有问题(垂直和水平):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

这也有对齐问题，我用这个烂摊子解决了:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

除了对齐问题之外，这两个选项都让人感觉“笨拙”，如果您之前碰巧见过这个并且知道一个优雅的解决方案，我会非常感激。

Answer 1

怎么样:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

看看这个JSFiddle .

您可以使用 vw 或 % 使其具有响应性。