css - 如何在 CSS 中的左侧和右侧放置带有水平线的标题文本

Question

我想要这样的设计；

我是这样写我的 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 来完成，以便我可以获得所需的设计!

Answer 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;
    }