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

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


当前回答

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

就这么简单。

其他回答

引导网格:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS:

.vertical-center{
  display: flex;
  align-items: center;
}

更新:这将不工作使用HTML5

相反,请查看这个问题以获得更多技术:CSS挑战,我可以在不引入更多HTML的情况下做到这一点吗?


我使用line-height:0在我的网站guerilla-alumnus.com的标题中创建效果

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

另一个好方法是http://robots.thoughtbot.com/

他使用背景图像和浮动来达到一种很酷的效果

如何:

<div style="width: 100%;高度:20 px;Border-bottom: 1px纯黑色;text-align:中心”> <span style="font- family:宋体;background - color: # F3F5F6;填充:0 10px;" > 章节标题<!-填充是可选的-> < / span > < / div >

看看这个JSFiddle。

您可以使用vw或%使其响应。

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

试试这个:

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

实时预览jsFiddle。