采用@kajic的解决方案，并将样式放在CSS中:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

然后CSS(但这取决于CSS3在使用第n个选择器):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

欢呼。

(注:在tbody和tr上，Chrome, IE和Firefox至少会自动插入tbody和tr，这就是为什么我的例子，像@kajic的例子，没有包括这些，以便在所需的html标记中保持内容简短。该解决方案在2013年最新版本的IE、Chrome和Firefox上进行了测试)。

哇，我的第一个帖子，尽管这是一年以前。为了避免包装器的背景着色问题，可以在hr中使用内联块(没有人明确地说过)。文本对齐应该正确居中，因为它们是内联元素。

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

css

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

Flexbox是解决方案:

.separator { 显示:flex; 对齐项目:中心; text-align:中心; ｝ .separator::, {后.separator:: 内容:”; flex: 1; Border-bottom: 1px实心#000; ｝ .separator:没有(空):::{之前 margin-right: .25em; ｝ .separator:没有(空)::{ margin-left: .25em; ｝ <div class="separator">下一节</div> .

现在每个浏览器都支持它，如果需要，您可以通过添加相应的供应商前缀来确保与10年前的浏览器兼容。无论如何，它都会优雅地退化。

<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

邪恶的黑客...