css实现文本两边水平横线效果

最新推荐文章于 2022-04-22 15:18:17 发布

原创最新推荐文章于 2022-04-22 15:18:17 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS来实现特定布局效果的方法，包括如何通过不同的属性设置文本与线条的样式，使得整体呈现更加美观和谐。文章详细展示了如何利用HTML结构配合CSS属性实现商品标题区域的个性化展示。

css代码
.goods-title {
    height: 35px;
    line-height: 35px;
    text-align: center;
}
.goods-title .line {
    display: inline-block;
    width: 30px;
    border-top: 1px solid #ccc ;/*线条粗细线型颜色 虚线为dashed*/
}
.goods-title .txt {
    color: #985f0d;
    height: 30px;
    line-height: 30px;
    vertical-align: -15%;/*设置vertical-align:center文本居中 可调节%设置上下偏差，*/
}
html代码
<div class="goods-title">
    <span class="line"></span>
    <span class="txt">为您推荐</span>
    <span class="line"></span>
</div>