显示2边框与文本中心

Question

Fiddle Link

我需要显示边界h1标签的背后却唯独没有后面的文本本身。也。在中心显示文字。目前你可以看到“为什么我们”文本不在中心。或者任何其他工作来做需要的事情。

<div class="lineb"><h1 class="hbord">What <span>we</span> can do</h1><div class="cls"></div></div> 

目前.lineb有灰色边框底部和.hbord有白色边框底部，供应我的目的的时刻，但不是完全的“为什么我们”不居中。

Answer 1

试试这个

HTML

<h1 class="one"><span>Heading Number One</span></h1> 
<h1 class="one"><span>Heading Number One</span></h1>​ 

CSS

h1 { 
    position: relative; 
    margin-top: 20px; text-align: center; 
    font-size:25px 
    } 

    h1.one { margin-top: 0; } 

    h1.one:before { 
    content: ""; 
    display: block; 
    border-top: solid 1px black; 
    width: 100%; 
    height: 1px; 
    position: absolute; 
    top: 50%; 
    z-index: 1; 
    } 
    h1.one span { 
    background: #fff; 
    padding: 0 20px; 
    position: relative; 
    z-index: 5; 
    }​ 

DEMO