html – 文本中间的水平线

概述参见英文答案 > Add centered text to the middle of a <hr/>-like line                                    26个 我想在中间显示一个带有单词的水平线,使其如下所示： 我正在尝试这个并不起作用： HTML： <h2><span>Test</span></h2> CSS： h2{ font-size: 10 参见英文答案 > Add centered text to the middle of a <hr/>-like line26个
我想在中间显示一个带有单词的水平线,使其如下所示：

我正在尝试这个并不起作用：

HTML：

<h2><span>Test</span></h2>

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/

解决方法 你可以习惯CSS：之后

像这样

HTML

<h2><span  >Test</span></h2>

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

LIve Demo

总结

以上是内存溢出为你收集整理的html – 文本中间的水平线全部内容，希望文章能够帮你解决html – 文本中间的水平线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。