加入收藏 | 设为首页 | 会员中心 | 我要投稿 | 高级搜索 | RSS
您当前的位置:首页 > 资料区 > html > css

css中怎么样将文字放在一条横线中间

时间:2020-02-21 18:16:02  来源:  作者:

首先看下预览:

a044ad345982b2b71899921d38adcbef77099be1.png

前台的HTML

<div class="sigma-content">
    <div class="sigma-middle-line">
        <span class="sigma-line-text">Sigma 的中横线</span>
    </div>
</div>


后台的CSS

.sigma-content{
    margin: 50px;
    text-align: center;
    background-color: #fff;
}
.sigma-middle-line:before{
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: #999;/*颜色需与主题大背景色一致*/ 
    position: relative;
    top: 10px;/*调节线高*/
    left: 0;
}
.sigma-line-text{
    display: inline-block;
    background: #fff;
    padding: 0 18px 0 18px;
    position: relative;
    font-size: 14px;
    font-weight: 500;
}


其它相关的也可以看一下。下面的

要在文字中间实现有一条横线的效果可以使用CSS中CSS text-decoration 属性就可以达到效果。

CSS text-decoration 属性相关介绍及事例:

  1. 浏览器支持:所有主流浏览器都支持 text-decoration 属性。

  2. 定义、用法和说明:text-decoration 属性规定添加到文本的修饰。

  3. CSS text-decoration 属性的值:

    A、none    默认。定义标准的文本。

    B、underline    定义文本下的一条线。 

    C、overline    定义文本上的一条线。

    D、line-through    定义穿过文本下的一条线。

    E、blink    定义闪烁的文本。

    F、inherit    规定应该从父元素继承 text-decoration 属性的值。

  4. 实例:

    h1 {text-decoration:overline}

    h2 {text-decoration:line-through}

    h3 {text-decoration:underline}

    h4 {text-decoration:blink}

    设置 h1、h2、h3、h4 元素的文本修饰。

  5. 注释:

    A、任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    B、IE、Chrome 或 Safari 不支持 "blink" 属性值。

    C、修饰的颜色由 "color" 属性设置。

    D、这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。


 关键字: text  decoration  CSS  元素  content  修饰  效果  background-color
顶一下
踩一下
返回首页
返回首页
热门下载
最新文章
相关文章
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表