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

2024-12-03 21:29:42

推荐回答（4个）

回答1：

预览：


    
        Sigma 的中横线

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

回答2：

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

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

浏览器支持：所有主流浏览器都支持 text-decoration 属性。
定义、用法和说明：text-decoration 属性规定添加到文本的修饰。
CSS text-decoration 属性的值：

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

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

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

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

E、blink 定义闪烁的文本。

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

h1 {text-decoration:overline}

h2 {text-decoration:line-through}

h3 {text-decoration:underline}

h4 {text-decoration:blink}

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

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

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

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

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

回答3：

    
        p{text-decoration:line-through;}
    
    test

试试看。

回答4：

文字代码