我想知道在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>

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


当前回答

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年前的浏览器兼容。无论如何,它都会优雅地退化。

其他回答

你可以使用相对位置在父节点上设置一个高度

.fake-legend { 高度:15 px; 宽度:100%; Border-bottom:固体2px #000; text-align:中心; Margin: 2em 0; } .fake-legend span { 背景:# fff; 位置:相对; 上图:0; 填充:0 20px; 行高:30 px; } < p class = " fake-legend " > < span >或< / span > < / p >

这是一个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。

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

我用中间张成空间的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 }

就这么简单。

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