残りの幅に中央のインラインブロック兄弟ストレッチ

Question

3つのインラインブロック要素があります。

中央のものが中央に配置されています。私は残りの幅の容器を取るために他の人をストレッチしたいと思います。

これは私がこれまで試したものです：

.container { 
 
    width: 400px; 
 
    height: 100px; 
 
    text-align: center; 
 
    background-color: yellow; 
 
} 
 

 
.line { 
 
    border: dashed 1px #C7C9C7; 
 
    display: inline-block; 
 
    width: 38%; 
 
} 
 

 
.content { 
 
    display: inline-block; 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <hr class="line" /> 
 
    <div class="content">This is a text</div> 
 
    <hr class="line" /> 
 
</div>

がどのように私は真ん中の幅が変更される場合でも、同じ結果を持つことができますか？あなたが望む出力を得るために.containerにdisplay: flex;を使用することができます

Answer 1

：あなたが途中でテキストを変更した場合See this fiddle

.container{ 
     width: 400px; 
     height: 100px; 
     text-align: center; 
     background-color: yellow; 
     display: flex; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     -webkit-box-align: center; 

     align-items: center; 
    } 

を、それが中心に保ち、残りの幅を取るために2人をストレッチしますコンテナ