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.

推荐答案

这大致是如何做：然后在 h2 上输入 border-bottom >一个较小的 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.

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中测试，但没有理由不能在其他浏览器。

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

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

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

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