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

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


当前回答

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

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

其他回答

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

更新:这将不工作使用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/

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

CSS

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

HTML

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

你可以根据标签"span"中的文本长度来修改"side"和"middle"类的宽度。确保“中间”的宽度加上“边”宽度的2倍等于100%。

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

看看这个JSFiddle。

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