css实现标题两边横线

CSS实现标题两边横线

.text{
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
}
    

在设计网页时，为了让网页更加美观和规整，经常需要使用各种样式进行排版。其中，标题两边横线是一种常见的样式。下面介绍如何使用CSS实现标题两边横线。

首先，使用p标签来实现页面的标题：

p class="text">
    CSS实现标题两边横线/p>

接着，使用CSS来为标题添加横线。具体代码如下：

.text{
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
}
    

在上面的代码中，我们使用了border-top和border-bottom属性来分别添加标题的上下横线，并设置了边框的样式（solid）、齐宽度（2px），以及颜色（#000）。另外，通过text-align属性来实现标题的居中对齐，通过padding属性来设置标题的内边距大小。

最终效果如下：

CSS实现标题两边横线

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