css怎么设置分割线

css怎么设置分割线

需要4个元素，最外层的div、左分割线、右分割线、中间的文字。

最外层的div，它的宽度和高度可以自由设置，里面的文字自动左右居中、垂直居中，分割线垂直居中，并且分割线被文字打断。

1、按照上述要求，编写最简单的html结构

<div class="box">
  <span class="line"></span>
  <span class="text">我的文字</span>
  <span class="line"></span>
</div>

2、使用flex布局，实现元素居中，两端对齐分布。（相关课程推荐：css视频教程）

<div class="box">
  <span class="line"></span>
  <span class="text">我的文字</span>
  <span class="line"></span>
</div>

.box {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.line {
  height: 1px;
  flex-grow: 1;
  background-color: #eaeaea;
}
.text{
	color: #989898;
	font-size: 14px;
	margin: 0 8px;
}

效果：

本文来自css3答疑栏目，欢迎学习！

以上就是css怎么设置分割线的详细内容，更多请关注0133技术站其它相关文章！