如何在CSS标签的中间有一条水平线？ [英] How to have a horizontal line at the middle of a html heading with CSS?

问题描述

确定我现在使用图片做，但我想通过CSS（没有绝对或相对定位，我想让它响应）。

示例： http://teothemes.com/ wp / services / 。标题是服务，在3个内容区域的上方...我想实现相同的效果与CSS。我尝试了一些，但没有成功。

谢谢。

解决方案>

以下是我的操作方式 - > http://tinkerbin.com/QN9efWHd

• CSS3背景图片


• 背景覆盖背景图片。

HTML ...

 < p& 
< span>服务或某事< / span> 
< / p> 
  

... for CSS ...

  p {
 background：linear-gradient（to bottom，rgba（145,37,37,0）49％，
 rgba（145,37， 37％）51％，rgba（145,37,37,1）52％，
 rgba（145,37,37,0）54％）; 
 text-align：center; 
} 
 
 span {
 display：inline-block; 
 padding：0 10px; 
 background：#fff; 
} 
  

Ok I now use an image to do it, but I want to do it via CSS(no absolut or relative positioning, I'm looking to make it responsive).

Example here: http://teothemes.com/wp/services/. The heading is 'Services', right above the 3 content areas...I'd like to achieve the same effect with only CSS. I tried some things but it didn't work.

Thank you.

解决方案

Here's how I'd do it -> http://tinkerbin.com/QN9efWHd

• CSS3 background-image
• span with background covering the background image.

the HTML...

<p>
    <span>Services or Something</span>
</p>

... for the CSS...

p {
    background: linear-gradient (to bottom,  rgba(145,37,37,0) 49%,
                rgba(145,37,37,1) 51%, rgba(145,37,37,1) 52%,
                rgba(145,37,37,0) 54%);
    text-align: center;
}

span {
    display: inline-block;
    padding: 0 10px;
    background: #fff;
}

这篇关于如何在CSS标签的中间有一条水平线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！