商品分類

CSS 標題分隔線文字

2021-10-07 10:30

HTML

<div class="line-slogan">
    <span class="line"></span>
    <h3 class="text">贈品設定</h3>
    <span class="line"></span>
</div>

CSS

.line-slogan {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.line-slogan .line {
    display: inline-block;
    flex-grow: 1;
    border-top: 3px solid #82b3d5;
}
.line-slogan .text {
    color: #555;
    padding-left: 30px;
    padding-right: 30px;
    display: inline-block;
}