Html 文本中间的水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16009654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal line in the middle of text
提问by user1251698
I want to display a horizontal line with words in the middle so that it looks like following:
我想在中间显示一条带有单词的水平线，如下所示：
I'm trying this and doesn't work:
我正在尝试这个但不起作用：
HTML:
HTML：
<h2><span>Test</span></h2>
CSS:
CSS：
h2{
font-size: 100px;
border-top: solid 1px black;
width: 100%;
height: 50px;
margin-top: 25px;
top: 50%;
z-index: 1;
}
span{
background: #fff;
padding: 0 20px;
margin-top:-25px;
display: inline-block;
z-index: 5;
}
JSFiddle:http://jsfiddle.net/2ds9a/
JSFiddle：http : //jsfiddle.net/2ds9a/
回答by Rohit Azad
you can used to css:after
你可以习惯css:after
as like this
像这样
HTML
HTML
<h2><span class="line-center">Test</span></h2>
Css
css
.line-center{
margin:0;padding:0 10px;
background:#fff;
display:inline-block;
}
h2{
text-align:center;
position:relative;
z-index:2;
}
h2:after{
content:"";
position:absolute;
top:50%;
left:0;
right:0;
border-top:solid 1px red;
z-index:-1;
}
回答by Daanvn
As shown in this answer(suggested by Quentin) the following code should work fine for you:
<div style="height: 2px; background-color: black; text-align: center">
<span style="background-color: white; position: relative; top: -0.5em;">
Section Title
</span>
</div>
For more info take a look at this question.
有关更多信息，请查看此问题。
回答by grigno
There are differents ways to do that, this is my solution:
有不同的方法可以做到这一点，这是我的解决方案：
<h2><span class="line"></span><span class="text">Test<span></h2>
<style>
h2{
font-size: 100px;
z-index: 1;
position: relative;
text-align: center;
}
.line{
background: #000;
border-top: solid 1px black;
position: absolute;
height: 1px;
display: block;
top: 56px;
width: 100%;
}
.text{
background-color: #FFFFFF;
z-index: 20;
position: relative;
text-align: center;
padding: 0 34px;
}
</style>
