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

Posted 2023-04-28

预览：

<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;
参考技术A

要在文字中间实现有一条横线的效果可以使用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。

参考技术B     <style type="text/css">
        ptext-decoration:line-through;
    </style>
    <p>test</p>

试试看。

参考技术C 文字代码

Wps2016做word时，目录自动生成后，二级标题下有一条横线，，这个横线怎么去除啊？

1.word2010自动生成目录方法如下：
一、设置标题格式
1.选中文章中的所有一级标题；
2.在“格式”工具栏的左端，“样式”列表中单击“标题1”。
仿照步骤1、2设置二、三级标题格式为标题2、标题3。
二、自动生成目录
1.把光标定位到文章第1页的首行第1个字符左侧（目录应在文章的前面）；
2.执行菜单命令“插入/引用/索引和目录”打开“索引的目录”对话框；
3.在对话框中单击“目录”选项卡，进行相关设置后，单击“确定”按钮，文章的目录自动生成完成。
2.乱码，可能因为格式没有设置统一，软件不能识别。 参考技术A 1.选中某一个二级目录；
2.工具栏-开始-样式，当前样式可能是PIM2，不是也没关系，重要的是右击该样式，选择修改，在弹出的页面中，点击左下角的格式，选择边框，设置为无边框，确认；
3.回到修改样式页面，就可以看到修改后的效果，再点击确认，就去掉横线了。 参考技术B 在段落里吧边框线去掉