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

Question

如题所述

Answer 1

预览：

<div class="sigma-content">
    <div class="sigma-middle-line">
        <span class="sigma-line-text">Sigma 的中横线</span>
    </div>
</div>.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;
}

Answer 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。

Answer 3

    <style type="text/css">
        p{text-decoration:line-through;}
    </style>
    <p>test</p>

试试看。

本回答被网友采纳

Answer 4

文字代码