将居中文本添加到类似<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%"> </td> <td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td> <td style="border-bottom: 1px solid gray; width: 47%"> </td> </tr><tr> <td> </td> <td> </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%" /> New Section <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"> </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> </p> <div class="divider right"> <hr /> <label>Welcome!</label> </div> <p> </p> <div class="divider center"> <hr /> <label>Welcome!</label> <hr /> </div> <p> </p> <div class="divider left fixed"> <hr /> <label>Welcome!</label> </div> <p> </p> <div class="divider right fixed"> <hr /> <label>Welcome!</label> </div> <p> </p> <div class="divider center fixed"> <hr /> <label>Welcome!</label> <hr /> </div>
或者这是一个互动小提琴： http : //jsfiddle.net/mpyszenj/439/
