中间有文字的水平线CSS技术
我试图用中间的一些文字来制定一个横向的规则。 例如：
———————————–我的标题在这里———— —————–
有没有办法做到这一点在CSS？ 没有明显的所有“ – ”破折号。
这大概是我怎么做的：通过在包含h2上设置border-bottom ，然后给h2一个较小的line-height来创build该行。 然后将文本放入具有不透明背景的嵌套span 。
HTML：
<h2><span>THIS IS A TEST</span></h2> <p>this is some content other</p>
CSS：
h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; } h2 span { background:#fff; padding:0 10px; }
我只在Chrome中进行了testing，但没有理由不能在其他浏览器中使用。
JSFiddle： http : //jsfiddle.net/7jGHS/
尝试不同的解决scheme后，我已经有了一个有效的不同的文字宽度，任何可能的背景，并没有添加额外的标记。
h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; }
我在IE8，IE9，Firefox和Chrome上testing过。 你可以在这里查看http://jsfiddle.net/Puigcerber/vLwDf/1/
好吧，这个比较复杂，但是IE浏览器只能工作在8以下
<div><span>text TEXT</span></div> div { text-align: center; position: relative; } span { display: inline-block; } span:before, span:after { border-top: 1px solid black; display: block; height: 1px; content: " "; width: 40%; position: absolute; left: 0; top: 1.2em; } span:after { right: 0; left: auto; }
：之前和之后：元素被完全定位之后，我们可以将其中一个拉到左边，一个在右边。 此外，宽度（在这种情况下，40％）是非常依赖于文本的宽度内..必须考虑解决scheme。 至lesstop: 1.2em确保线条或多或less留在文本的中心，即使你有不同的字体大小。
它似乎工作正常，但： http : //jsfiddle.net/tUGrf/3/
又一种方法：
span:after, span:before{ content:"\00a0\00a0\00a0\00a0\00a0"; text-decoration:line-through; }
<span> your text </span>
对于今天（今天）的浏览器来说， display:flex和d pseudo-elements可以很容易地绘制出来。 border-style ， box-shadow ，甚至background有助于化妆。 
h1 {margin-top:50px; display:flex; background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);; } h1:before, h1:after { color:white; content:''; flex:1; border-bottom:groove 2px; margin:auto 0.25em; box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */ }
<h1>side lines via flex</h1>
这里是基于Flex的解决scheme。
HTML：
<h1>Today</h1>
CSS：
h1 { display: flex; flex-direction: row; } h1:before, h1:after{ content: ""; flex: 1 1; border-bottom: 1px solid #000; margin: auto; }
JSFiddle： https ：//jsfiddle.net/yoshiokatsuneo/3h1fmj29/
<div><span>text TEXT</span></div> div { height: 1px; border-top: 1px solid black; text-align: center; position: relative; } span { position: relative; top: -.7em; background: white; display: inline-block; }
给跨度填充以在文本和行之间留出更多空间。
例如： http : //jsfiddle.net/tUGrf/
.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">Text</div>
解决scheme为IE8和更新…
值得注意的问题：
使用background-color掩盖边界可能不是最好的解决scheme。 如果你有一个复杂的（或未知的）背景颜色（或图像），掩膜将最终失败。 此外，如果您调整文本大小，您会注意到白色背景颜色（或您设置的任何内容）将开始覆盖上面（或下面）行上的文本。
您也不希望“猜测”这些部分的宽度，因为这会使得样式变得非常不灵活，而且在内容宽度发生变化的响应式网站上实现这些样式几乎是不可能的。
解：
（ 查看JSFiddle ）
而不是“掩盖”与background-color的边框，使用您的display属性。
HTML
<div class="group"> <div class="item line"></div> <div class="item text">This is a test</div> <div class="item line"></div> </div>
CSS
.group { display: table; width: 100%; } .item { display: table-cell; } .text { white-space: nowrap; width: 1%; padding: 0 10px; } .line { border-bottom: 1px solid #000; position: relative; top: -.5em; }
通过在.group元素上放置font-size属性来调整文本font-size 。
限制：
- 没有多行文字。 单线只。
- HTML标记不够高雅
-
.line元素的top属性需要为line-height一半。 所以，如果你有一个1.5em的line-height，那么top应该是-.75em。 这是一个限制，因为它不是自动化的，如果您将这些样式应用到具有不同行高的元素上，则可能需要重新应用line-height样式。
对我而言，这些限制超过了我在大多数实现的答案开始时提到的“问题”。
我一直在寻找这个简单的装饰一些解决scheme，我发现了很多，有些怪异的，有些甚至用JS来计算字体的高度和bla，bla，bla，然后我读了一篇关于这篇文章的文章，并且读了一篇关于fieldset和legend的评论，我以为就是这样。
我重写了这两种元素风格，我想你可以复制W3C标准，并将其包含在你的.middle-line-text类（或者你想要调用的任何东西）中，但这是我所做的：
<fieldset class="featured-header"> <legend>Your text goes here</legend> </fieldset> <style> .featured-header{ border-bottom: none; border-left: none; border-right: none; text-align: center; } .featured-header legend{ -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */ -webkit-padding-end: 8px; background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */ font-weight: normal; /* I preffer the text to be regular instead of bold */ color: YOU_CHOOSE; } </style>
这是小提琴： http : //jsfiddle.net/legnaleama/3t7wjpa2/
我玩过的边框样式，它也适用于Android;）（testingkitkat 4.XX）
编辑：
按照贝克托夫Artur的想法，这也是一个不错的select，我已经改变了.png base64图像创build一个.SVG中风，所以你可以在任何分辨率渲染，也可以改变元素的颜色，没有任何其他软件介入:)
/* SVG solution based on Bekerov Artur */ /* Flexible solution, scalable, adaptable and also color customizable*/ .stroke { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>"); background-repeat: repeat-x; background-position: left; text-align: center; } .stroke h3 { background-color: #ffffff; margin: 0 auto; padding:0 10px; display: inline-block; font-size: 66px; }
如果有人想知道如何设置标题，使其出现在左侧的固定距离（而不是如上所述居中），我通过修改@ Puigcerber的代码来计算出来。
h1 { white-space: nowrap; overflow: hidden; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; } h1:before { right: 0.3em; width: 50px; } h1:after { left: 0.3em; width: 100%; }
这里JSFiddle 。
h6 { font: 14px sans-serif; margin-top: 20px; text-align: center; text-transform: uppercase; font-weight: 900; } h6.background { position: relative; z-index: 1; margin-top: 0%; width:85%; margin-left:6%; } h6.background span { background: #fff; padding: 0 15px; } h6.background:before { border-top: 2px solid #dfdfdf; content: ""; margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; }
这将帮助你
线之间
这给你一个静态的线宽，但是效果很好。 线宽是通过添加或取'\ 00a0'（一个Unicode空格）来控制的。
h1:before, h1:after { content:'\00a0\00a0\00a0\00a0'; text-decoration: line-through; margin: auto 0.5em; }
<h1>side lines</h1>
我不太确定，但是可以尝试使用横向规则，并将文本顶部边缘以上的文本。 您的段落标记和背景也需要固定的宽度。 这是一个有点hacky，我不知道它是否会在所有的浏览器上工作，你需要根据字体的大小设置负边距。 虽然在铬上工作。
<style> p{ margin-top:-20px; background:#fff; width:20px;} </style> <hr><p>def</p>
我已经尝试了大多数build议的方式，但以全宽等问题结束，或者不适合dynamic内容。 最后，我修改了一个代码，完美地工作。 这个示例代码将在前后绘制这些行，并且在内容更改上很灵活。 中心也alignment。
HTML
<div style="text-align:center"> <h1> <span >S</span> </h1> </div> <div style="text-align:center"> <h1> <span >Long text</span> </h1> </div>
CSS
h1 { display: inline-block; position: relative; text-align: center; } h1 span { background: #fff; padding: 0 10px; position: relative; z-index: 1; } h1:before { background: #ddd; content: ""; height: 1px; position: absolute; top: 50%; width: calc(100% + 50px);//Support in modern browsers left: -25px; } h1:before { left: ; }
结果： https ： //jsfiddle.net/fasilkk/vowqfnb9/
我使用表格布局来dynamic地填充边和0高度的绝对位置div来进行dynamic垂直定位：
- 没有硬编码的尺寸
- 没有图像
- 没有伪元素
- 尊重背景
- 控制条的外观
https://jsfiddle.net/eq5gz5xL/18/
我发现一个低于真正的中心看起来最好的文字; 这可以在55%地方调整（较高的高度使得杆较低）。 该行的外观可以改变的地方在border-bottom 。
HTML：
<div class="title"> <div class="title-row"> <div class="bar-container"> <div class="bar"></div> </div> <div class="text"> Title </div> <div class="bar-container"> <div class="bar"></div> </div> </div> </div>
CSS：
.title{ display: table; width: 100% background: linear-gradient(to right, white, lightgray); } .title-row{ display: table-row; } .bar-container { display: table-cell; position: relative; width: 50%; } .bar { position: absolute; width: 100%; top: 55%; border-bottom: 1px solid black; } .text { display: table-cell; padding-left: 5px; padding-right: 5px; font-size: 36px; }
比我见过的更容易，没有:before和:after ：http :after //codepen.io/bekerov/pen/QwbaNR
