[分享]css两边是线 中间是文字

在制作网页时，经常会遇到需要将一段文字放在两条竖线之间的情况。这时候，我们可以使用CSS来实现这个效果。borderleft: 1px solid 000; borderright: 1px soli...

在制作网页时，经常会遇到需要将一段文字放在两条竖线之间的情况。这时候，我们可以使用CSS来实现这个效果。

border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 10px; 

代码中的border-left和border-right属性分别设置左右两边的边框样式，这里我们使用了实线且颜色为#000的边框。

而padding属性则可以控制文字和边框之间的距离。在这里，我们将左右两边的padding都设置为10px，这样就能够让文字和边框之间保持一定的距离。

实际使用时，我们可以将这些样式封装在一个class中，然后在需要的地方应用这个class即可：

<style>
.text-box {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 0 10px;
}
</style>

<div class="text-box">
  这里是需要放在中间的文字。
</div> 

这样做不仅能够使代码更加简洁，也能够让需要使用的文字更容易被定制。