css样式画横线居中

CSS样式可以让我们实现各种各样的效果，比如画一条横线在文字中间显示。

首先，我们需要给文字添加一个父级元素，并设置其样式。这里我们使用p标签。

p {
    position: relative;
     /* 使内部元素可以相对于其进行定位 */text-align: center;
     /* 让文字居中显示 */font-size: 20px;
     /* 设置文字大小 */line-height: 1.5;
 /* 设置行高 */}

接下来，我们添加一个伪元素，用来表示横线。使用before或after伪元素都可以。在这里，我们使用after伪元素。

p::after {
    content: '';
     /* 伪元素必须设置content值，否则不会产生效果 */display: inline-block;
     /* 将伪元素设为行内块元素 */width: 50%;
     /* 设置伪元素的宽度为父元素的一半 */height: 1px;
     /* 设置伪元素的高度为1像素 */background-color: #000;
     /* 设置伪元素的背景颜色为黑色 */position: absolute;
     /* 将伪元素设为绝对定位，相对于父元素进行定位 */bottom: 50%;
     /* 将伪元素定位到文字底部的一半处 */left: 25%;
     /* 将伪元素左对齐到父元素的一半处 */transform: translateY(50%);
 /* 通过translateY变换将伪元素垂直居中 */}
    

最后，我们就可以看到效果了。可以根据自己的需求修改文字大小、横线宽度、颜色等。

完整代码如下：

style>
p {
    position: relative;
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}
p::after {
    content: '';
    display: inline-block;
    width: 50%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 50%;
    left: 25%;
    transform: translateY(50%);
}
    /style>
    p>
    在这里写一些文字/p>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！