コンビニ内に3つのdivがあります

Question

まず、私はこれに対して何の答えも見つかりませんでした。重複している場合は、私を許して正しいことを指摘してください。

私は内部に3つのdivを持つdivを作成しようとしています。中央のdivがテキストを持っている必要があり、サイドのdivは、このような垂直方向の中央ライン、持っている必要があります。

これは私がこれまで持っているコードです：

HTML：

<div className="container"> 
    <div class="line"><hr/></div> 
    <div class="text">My Text</div> 
    <div class="line"><hr/></div> 
</div> 

を

CSS：

.container { 
    .text { 
    font-size: 16px; 
    text-transform: uppercase; 
    color: red; 
    display: inline-block; 
    } 

    .line { 
    display: inline-block; 
    } 
} 

私の問題は、私は、Dということですラインはまったく見えません。私のテキストは左に配置されています。私はmargin: auto;を試しましたが、それは私を助けませんでした。誰かが助けてくれる？

私には前提条件があり、フレックスボックスは使用できません。

Answer 1

hrの代わりにpseudoelementsを使用してこのレイアウトに近づけることができます。

例：

.container { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.container:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    height: 2px; 
 
    background: grey; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.text { 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    color: red; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    background: white; 
 
    position: relative; 
 
    /* add left and right padding if needed */ 
 
    padding: 0 1em; 
 
}

<div class="container"> 
 
    <div class="text">My Text</div> 
 
</div>