每側的內容和線條居中填充剩余空間

Question

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

的CSS

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

我想要像圖片一樣的安排→

編輯

我希望沒有Flexbox的解決方案

Answer 1

這是調整后的CSS，不使用flexbox。

 .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; } 

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

Answer 2

如果您不想更改標記：

 .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; } 

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

Answer 3

我為左右行添加了兩個新的DIV 。 我也將.text-mid class的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; } 

 <div class="text-mid"> <div id="left"></div> <span>TEXT AREA</span> <div id="right"></div> </div> 

Answer 4

使用偽元素很容易做到這一點

通過同時使用兩者，這對於背景也將是完全透明的。

主要技巧是設置overflow: hidden在包裝器上，每個偽overflow: hidden上的width足以覆蓋所有可能的寬度

 .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%; } 

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