将居中文本添加到类似<hr />的行的中间

我想知道在xhtml 1.0中有什么选项可以严格在文本的两侧创build一行:

第一节
 -----------------------下一节-----------------------
第二节

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

<div style="float:left; width: 44%;"><hr/></div> <div style="float:right; width: 44%;"><hr/></div> Next section 

或者,因为上面的alignment有问题(纵向和横向):

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

这也有alignment问题,我解决这个混乱:

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

除了alignment问题之外,这两个选项都会感到“肮脏”,如果您碰巧遇到过这种优雅的解决scheme,我会非常感激。

怎么样:

 <div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center"> <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;"> Section Title <!--Padding is optional--> </span> </div> 

在不知道宽度和背景颜色的情况下解决这个问题的方法如下:

结构体

 <div class="strike"> <span>Kringle</span> </div> 

CSS

 .strike { display: block; text-align: center; overflow: hidden; white-space: nowrap; } .strike > span { position: relative; display: inline-block; } .strike > span:before, .strike > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 1px; background: red; } .strike > span:before { right: 100%; margin-right: 15px; } .strike > span:after { left: 100%; margin-left: 15px; } 

例如: http : //jsfiddle.net/z8Hnz/

双线

要创build双线,请使用以下选项之一:

1)行间固定空间

 .strike > span:before, .strike > span:after { content: ""; position: absolute; top: 50%; width: 9999px; border-top: 4px double red; 

例如: http : //jsfiddle.net/z8Hnz/103/

2)线之间的自定义空间

 .strike > span:before, .strike > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 5px; /* space between lines */ margin-top: -2px; /* adjust vertical align */ border-top: 1px solid red; border-bottom: 1px solid red; } 

例如: http : //jsfiddle.net/z8Hnz/105/


SASS(SCSS)版本

基于这个解决scheme,如果SCSS能够帮助某人,那么我就添加了“具有颜色属性”的SCSS。

 //mixins.scss @mixin bg-strike($color) { display: block; text-align: center; overflow: hidden; white-space: nowrap; > span { position: relative; display: inline-block; &:before, &:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 1px; background: $color; } &:before { right: 100%; margin-right: 15px; } &:after { left: 100%; margin-left: 15px; } } } 

使用示例:

 //content.scss h2 { @include bg-strike($col1); color: $col1; } 

尝试这个:

 .divider { width:500px; text-align:center; } .divider hr { margin-left:auto; margin-right:auto; width:40%; } .left { float:left; } .right { float:right; } 
 <div class="divider"> <hr class="left"/>TEXT<hr class="right" /> </div> 

你可以使用:: before和:: after来完成这个工作,而不需要知道容器或者背景颜色的宽度,并且可以获得更大的换行样式。 例如,这可以修改为双线,虚线等。

的jsfiddle

CSS和HTML用法:

 .hr-sect { display: flex; flex-basis: 100%; align-items: center; color: rgba(0, 0, 0, 0.35); margin: 8px 0px; } .hr-sect::before, .hr-sect::after { content: ""; flex-grow: 1; background: rgba(0, 0, 0, 0.35); height: 1px; font-size: 0px; line-height: 0px; margin: 0px 8px; } 
 <div class="hr-sect">CATEGORY</div> 

我刚刚遇到同样的问题,这里有一个解决方法:

 <table width="100%"> <tr> <td><hr /></td> <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td> <td><hr /></td> </tr> </table>​ 

它的工作原理没有在文本元素上设置背景,即不pipe背后是什么背景,它都会很好看。

你可以在这里试试看: http : //jsfiddle.net/88vgS/

更新:这将无法使用HTML5

相反,检查出这个问题更多的技术: CSS的挑战,我可以做到这一点,而不需要引入更多的HTML?


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

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

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

我不知道这是否已经算出来,但flexbox提供了一个相当的解决scheme:

 <div class="separator">Next section</div> .separator { display: flex; align-items: center; text-align: center; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid #000; } .separator::before { margin-right: .25em; } .separator::after { margin-left: .25em; } 

请参阅http://jsfiddle.net/MatTheCat/Laut6zyc/进行演示。;

今天,兼容性并不差 (可以添加所有旧的Flexbox语法),并且会优雅地降级。

如果您可以使用CSS并且愿意使用弃用的align属性,则样式化的字段集/图例将起作用:

 <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样式对于legend元素将不起作用。 align="center"是不推荐的HTML,但它应该在所有浏览器中正确地居中文本。

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

你可以使用相对位置,并在父级上设置高度

 .fake-legend { height: 15px; width:100%; border-bottom: solid 2px #000; text-align: center; margin: 2em 0; } .fake-legend span { background: #fff; position: relative; top: 0; padding: 0 20px; line-height:30px; } 
 <p class="fake-legend"><span>Or</span> </p> 
 <fieldset style="border:0px; border-top:1px solid black"> <legend>Test</legend> </fieldset> 

邪恶的黑客…

颠簸了一个2​​岁的职位,但这里是我如何处理这些情况只使用一个元素和CSS。

 ​h1 { text-align: center; } h1:before, h1:after { content: ""; background: url('http://heritageonfifth.comhttp://img.dovov.comseperator.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的inline-block(没有人明确指出)。 文本alignment应该居中正确,因为它们是内联元素。

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

我用中间跨度的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

 .divider { font: 33px sans-serif; margin-top: 30px; text-align:center; text-transform: uppercase; } .divider span { position:relative; } .divider span:before, .divider span:after { border-top: 2px solid #000; content:""; position: absolute; top: 15px; right: 10em; bottom: 0; width: 80%; } .divider span:after { position: absolute; top: 15px; left:10em; right:0; bottom: 0; } 

HTML

 <div class="divider"> <span>This is your title</span></div> 

似乎工作正常。

以@ kajic的解决scheme,并在CSS中的样式:

 <table class="tablehr"> <td><hr /></td> <td>Text!</td> <td><hr /></td> </table> 

然后CSS(但它依赖于使用第n个select器中的CSS3):

 .tablehr { width:100%; } .tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; } 

干杯。

(PS在tbody和tr,Chrome,IE和Firefox至less会自动插入一个tbody和tr,这就是为什么我的样本,如@ kajic的,没有包括这些,以保持在所需的HTML标记的东西更短。使用IE,Chrome和Firefox的最新版本进行了testing,截止到2013年)。

演示页面

HTML

 <header> <h1 contenteditable>Write something</h1> </header> 

CSS

 header{ display:table; text-align:center; } header:before, header:after{ content:''; display:table-cell; background:#000; width:50%; -webkit-transform:scaleY(0.3); transform:scaleY(0.3); } header > h1{ white-space:pre; padding:0 15px; } 

这工作对我来说,并不需要背后的文字隐藏边框线,而是使用实际的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 { padding: 0; border: none; border-top: 1px solid #CCC; color: #333; text-align: center; font-size: 12px; vertical-align:middle; } hr:after { content: "Or"; display: inline-block; position: relative; top: -0.7em; font-size: 1.2em; padding: 0 0.25em; background: white; } 

你可以在没有<hr />情况下完成。 在语义上,devise应该用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> 

你可以尝试做一个字段集,然后将“legend”元素(你的“下一节”文本)与只设置border-top的字段中间alignment。 我不确定传说是如何根据fieldset元素定位的。 我想这可能只是一个简单的margin: 0px auto去做的伎俩,虽然。

总是有很好的旧FIELDSET

  fieldset { border-left: none; border-right: none; border-bottom: none; } fieldset legend { text-align: center; padding-left: 10px; padding-right: 10px; } 

你可以用一些适当的背景图像创build一个包装块(也为你的居中的文本块设置一些背景颜色)。

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

Bootstrap网格:

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

我做了一个使用FlexBox的小提琴 ,并且还会给你不同风格的HR(双线,线条中心的符号,阴影,插入,虚线等)。

CSS

 button { padding: 8px; border-radius: 4px; background-color: #fff; border: 1px solid #ccc; margin: 2px; } button:hover { cursor: pointer; } button.active { background-color: rgb(34, 179, 247); color: #fff; } .codeBlock { display: none; } .htmlCode, .cssCode { background-color: rgba(34, 179, 247, 0.5); width: 100%; padding: 10px; } .divider { display: flex; flex-direction: row; flex-flow: row; width: 100%; } .divider.fixed { width: 400px; } .divider > label { align-self: baseline; flex-grow: 2; white-space: nowrap; } .divider > hr { margin-top: 10px; width: 100%; border: 0; height: 1px; background: #666; } .divider.left > label { order: 1; padding-right: 5px; } .divider.left > hr { order: 2 } .divider.right > label { padding-left: 5px; } /* hr bars with centered text */ /* first HR in a centered version */ .divider.center >:first-child { margin-right: 5px; } /* second HR in a centered version */ .divider.center >:last-child { margin-left: 5px; } /** HR style variations **/ hr.gradient { background: transparent; background-image: linear-gradient(to right, #f00, #333, #f00); } hr.gradient2 { background: transparent; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)); } hr.dashed { background: transparent; border: 0; border-top: 1px dashed #666; } hr.dropshadow { background: transparent; height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5); } hr.blur { background: transparent; border: 0; height: 0; /* Firefox... */ box-shadow: 0 0 10px 1px black; } hr.blur:after { background: transparent; /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ } hr.inset { background: transparent; border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } hr.flared { background: transparent; overflow: visible; /* For IE */ height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr.flared:before { background: transparent; display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; } hr.double { background: transparent; overflow: visible; /* For IE */ padding: 0; border: none; border-top: medium double #333; color: #333; text-align: center; } hr.double:after { background: transparent; content: "§"; display: inline-block; position: relative; top: -0.7em; font-size: 1.5em; padding: 0 0.25em; } 

HTML

 <div class="divider left"> <hr /> <label>Welcome!</label> </div> <p>&nbsp;</p> <div class="divider right"> <hr /> <label>Welcome!</label> </div> <p>&nbsp;</p> <div class="divider center"> <hr /> <label>Welcome!</label> <hr /> </div> <p>&nbsp;</p> <div class="divider left fixed"> <hr /> <label>Welcome!</label> </div> <p>&nbsp;</p> <div class="divider right fixed"> <hr /> <label>Welcome!</label> </div> <p>&nbsp;</p> <div class="divider center fixed"> <hr /> <label>Welcome!</label> <hr /> </div> 

或者这是一个互动小提琴: http : //jsfiddle.net/mpyszenj/439/