带有CSS的左侧和右侧边框的标题

Question

我基本上需要重现下一个图片标题，即“体验”：

我怎么做？

谢谢！

Answer 1

这样的事情可能起到了作用：http://jsfiddle.net/R52sq/1/

没有浮子。只有一个额外的标签，可以有任何长度的内容（甚至比浏览器宽度更大）。

唯一的缺点是它可能在IE6中不起作用，并且可能只在IE7中部分工作（需要在IE7中进行测试以确保，在当前的计算机上没有。）

Answer 2

使用div这应该可以解决问题：

HTML：

<div id="left"></div><div id="title">Experience</div><div id="right"></div>

CSS：

#left {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#right {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#title {
    width:20%;
    float:left;
    height:20px;
    text-align:center;
}

Answer 3

https://jsfiddle.net/5jge1qnx/

<强> HTML

<div class="title">
    <h1>Title</h1>
</div>

<强> CSS

.title {
   width:100%;
   text-align:center; 
   position: relative;
}

h1 {
   position:relative; 
   padding:10px; 
   background: #f3f5f6;
   display: inline-block;
   z-index: 1;
}

.title::after {
   content:'';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: #000;
   z-index:0;
}

小心宽度你的标题背景！它必须与您的父元素或正文的背景相同！