将居中文本添加到类似<hr />的行的中间

Question

我想知道在xhtml 1.0中有哪些严格选项可以在像这样的文本两边都创建一行：第一节-----------------------下一部分-----------------------第二节我曾想过做一些像这样的幻想：<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或%使之响应。