中间标题名字，两边有线

小皮皮不皮

已于 2023-04-27 14:20:11 修改

阅读量105

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css javascript html

于 2023-04-20 14:11:05 首次发布

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/130265234

css 专栏收录该内容

29 篇文章

订阅专栏

可以通过调整宽度来设置两边的线

 <div class="modelTitle"> <span>大家好</span> </div>
.modelTitle {
  width: 100%;
  display: table;
  white-space: nowrap;
  text-align: center;
  background: transparent;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  margin: 8px 0;
  vertical-align: middle;
  position: relative;
}

.modelTitle::before,
.modelTitle::after {
  content: "";
  width: 50%;
  height: 1px;
  border-top: 1px solid #e8eaec;
  display: table-cell;
  top: 50%;
  transform: translateY(50%);
}

.modelTitle span {
  display: inline-block;
  padding: 0 10px;
}