中心的內容和填充剩餘的空間上的每個側線

Question

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

CSS

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

我想要的佈置等中圖像→

編輯

我寧願沒有Flexbox的解決方案

Answer 1

這是使用僞元素

使用都非常輕鬆地完成，這也將是朝着它的背景是完全透明的。

主要的竅門是設置在包裝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>

Answer 2

這是調整後的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 3

我已經添加了兩個新的DIV的左，右線。我也改變了class.text-mid的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

如果你不想改變你的標記：

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