每侧的中心内容和线条填充剩余空间

Question

<div class="text-mid">
  <span>TEXT</span>
</div>

CSS

.text-mid {
  display:block;
  margin: 10px;
  padding; 10px;
}

我想像图像中那样安排→

修改

我更喜欢没有Flexbox的解决方案

Answer 1

这是经过调整的CSS，不使用flexbox。

＆＃13;

＆＃13;

.text-mid {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
}

.middle {
  padding: 10px;
  background-color: white;
}

.start {
  left: 0;
}

.finish {
  right: 0;
}

.start, .finish {
  transform: translateY(50%);
  position: absolute;  
  top: 50%;  
  width: 50%;
  background-color: black;
  height: 1px; 
  z-index: -1;
}

＆＃13;

<div class="text-mid">
  <span class="start"></span>
  <span class="middle">TEXT</span>
  <span class="finish"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不想更改标记：

＆＃13;

＆＃13;

.text-mid {
  text-align: center;
  background-color: white;
  position: relative;
  z-index: -2;
}

.text-mid::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: grey;
  content: ' ';
  z-index: -1;
}

.text-mid span {
  background-color: white;
  padding: 0 10px;
}

＆＃13;

<div class="text-mid">
  <span>TEXT</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我为左右行添加了两个新的DIV。我还将class .text-mid的{​​{1}}更改为display。

flex

.text-mid {
  display: flex;
}

span {
  display: block;
  margin: 0 5px;
}

#left {
  background-color: #AAAAAA;
  flex: 1;
  height: 1px;
  margin-top: 8px;
}

#right {
  background-color: #AAAAAA;
  flex: 1;
  height: 1px;
  margin-top: 8px;
}

Answer 4

使用伪元素

非常容易

通过使用两者，这对其背景也是完全透明的。

主要技巧是在包装器上设置overflow: hidden，在每个伪上设置width以覆盖所有可能的宽度

＆＃13;

＆＃13;

.text-mid {
  margin: 10px;
  padding: 10px;
  text-align: center;
  overflow: hidden;
}
.text-mid span {
  position: relative;
  padding: 0 5px;
}
.text-mid span::before,
.text-mid span::after {
  content: '';
  position: absolute;
  width: 50vw;
  top: 50%;
  border-top: 1px solid black;
}
.text-mid span::after {
  left: 100%;
}
.text-mid span::before {
  right: 100%;
}

＆＃13;

<div class="text-mid">
  <span>TEXT</span>
</div>

＆＃13;

＆＃13;

＆＃13;