我想知道在xhtml 1.0中有什么选项可以严格地在文本的两侧创建一行,就像这样:

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

我想过做一些像这样的奇妙的事情:

<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>

除了对齐问题之外,这两个选项都让人感觉“糊里糊涂”,如果你之前碰巧看到过这个,并且知道一个优雅的解决方案,我将非常感激。


当前回答

如果你可以使用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,但它应该在所有浏览器中正确地居中文本。

其他回答

这是一个2年前的帖子,但这里是我如何使用一个元素和CSS来处理这些情况。

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

这里有一个小提琴来检查:http://jsfiddle.net/sRhBc/(随机图像从谷歌采取的边界)。

这种方法的唯一缺点是它不支持IE7。

哇,我的第一个帖子,尽管这是一年以前。为了避免包装器的背景着色问题,可以在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>

这为我工作,不需要背景颜色后面的文本隐藏边界线,而是使用实际的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>

你可以不需要<hr />就完成这个任务。从语义上讲,设计应该用CSS的手段来完成,在这种情况下是很有可能的。

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

与Bootstrap 4,这似乎是为我工作:

<div class=“row”> <div class=“col”><hr/></div> <div class=“col-auto”>Or</div> <div class=“col”><hr/></div> </div>