如何在CSS中的左右两侧放置带有水平线的标题文本答案

【问题标题】：how to place a heading text with horizontal lines in left & right side in CSS如何在CSS中的左右两侧放置带有水平线的标题文本
【发布时间】：2014-04-19 21:23:27
【问题描述】：

我想要这样的设计；

我的 CSS 是这样写的：

在这打字

.my-title:before,
.my-title:after {
    background-color: #CCCCCC;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 32%;
    margin-left: -2%;
}
}

这在本地似乎是正确的，但由于最后的 } 大括号，它在生产中会出错。如何用更简单的 CSS 来做，这样我就能得到想要的设计！

【问题讨论】：

css technique for a horizontal line with words in the middle 和 stackoverflow.com/questions/2812770/…、和 stackoverflow.com/questions/16009654/…、和的可能重复...
末尾有2个大括号，去掉其中一个即可。尽管有 2 个 CSS 选择器，但它们在一个组中，所以只使用一个结束大括号

标签： css css-float

【解决方案1】：

DEMO

HTML

<div class="maintext">
<div class="subtext">
 <h2>Text Here</h2>
</div>
</div>

CSS

.maintext{
    width:100%;
    height:1px;
    border-top:2px solid #6b6a6a;
    position:relative;
    margin-bottom:30px;
    }
.subtext{
    width:auto;
    height:auto;
    text-align:center;
    position:absolute;
    top:-15px;
    right:0;
    left:0;
    }
.subtext h2{
    padding:7px 12px;
    background:#ffffff;
    display:inline;
    color:#000000;
    font-family: 'Georgia';
    font-size:30px;
    }

【讨论】：

【解决方案2】：

把你的代码改成这个

将position:relative 添加到.my-title

.my-title:before{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    right:100%;
    marging:-1px 0 0;
}

.my-title:after{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    left:100%;
    marging:-1px 0 0;
}

【讨论】：