如果你可以使用CSS并且愿意使用已弃用的align属性，那么一个有样式的fieldset/legend将会工作:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

字段集的预期目的是对表单字段进行逻辑分组。正如willoler所指出的，text-align: center样式的for将不适用于图例元素。align="center"是已弃用的HTML，但它应该在所有浏览器中正确地居中文本。

试试这个:

.divider { 宽度:500 px; text-align:中心; ｝ .divider hr { margin-left:汽车; margin-right:汽车; 宽度:40%; ｝ .left { 浮:左; ｝ 铃声{ 浮:正确; ｝ < div class = "分" > <hr class="left"/>TEXT<hr class="right" /> < / div >

实时预览jsFiddle。

这为我工作，不需要背景颜色后面的文本隐藏边界线，而是使用实际的hr标签。你可以调整宽度来得到不同大小的hr线。

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

采用@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上进行了测试)。

我用中间张成空间的h1。

HTML的例子:

<h1><span>Test archief</span></h1>

CSS例子:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

就这么简单。

您可以使用CSS flex属性

HTML

<div class="hrtext">
  <div class="hrbefore">
    <hr>
  </div>
  <div class="hrcontent">
    <h2>TABLE OF CONTENT</h2>
  </div>
  <div class="hrafter">
    <hr>
  </div>
</div>

CSS

.hrtext{
    display:flex;
    align-items:center;
}
.hrbefore,.hrafter{
    flex:auto;
}
.hrcontent{
    text-align:center;
}