中心コンテンツと行の残りのスペースを埋める

Question

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

CSS

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

私は配置したい画像のように→

編集として

Flexboxを使用しないソリューション

Answer 1

これは非常に簡単に両方を使用して擬似要素を

を使用して行われ、これはまた、その背景に向かって完全に透明であろう。

メインのトリックは、あなたのマークアップを変更したくない場合は、すべての可能な幅の

.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があります。

.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

私は左と右のラインのための2つの新しい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

をカバーするのに十分な各擬似にラッパーとwidthにoverflow: hiddenを設定することです：

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