用于在中间带有单词的水平线的 CSS 技术 [英] CSS technique for a horizontal line with words in the middle

问题描述

我正在尝试使用中间的一些文本来制作水平线.例如:

I'm trying to make a horizontal rule with some text in the middle. For example:

----------------------------------- 我的标题在这里-----------------------------

----------------------------------- my title here -----------------------------

有没有办法在 CSS 中做到这一点?显然没有所有的-"破折号.

Is there a way to do that in CSS? Without all the "-" dashes obviously.

推荐答案

这大概是我的做法:通过在包含的 上设置 border-bottom 来创建该行h2 然后给 h2 一个较小的 line-height.然后将文本放入具有非透明背景的嵌套 span 中.

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

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

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

我只在 Chrome 中进行了测试，但没有理由不能在其他浏览器中运行.

I tested in Chrome only, but there's no reason it shouldn't work in other browsers.

JSFiddle:http://jsfiddle.net/7jGHS/

这篇关于用于在中间带有单词的水平线的 CSS 技术的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！