html – 文本中间的水平线
发布时间:2020-12-14 23:30:36 所属栏目:资源 来源:网络整理
导读:参见英文答案 Add centered text to the middle of a hr/-like line26个 我想在中间显示一个带有单词的水平线,使其如下所示: 我正在尝试这个并不起作用: HTML: h2spanTest/span/h2 CSS: h2{ font-size: 100px; border-top: solid 1px black; width: 100%
参见英文答案 >
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: 解决方法
你可以习惯css:之后
像这样 HTML <h2><span class="line-center">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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |