同じ行にあるimgとh1コンテンツを隣接させるために

Question

h1のタグは、同じイメージの2つのインスタンスがページの水平方向の中央に配置されているようにします。私は、次のHTMLを持っている：

#divH1 { 
    display: inline; 
    /* 
    overflow: hidden; 
    */ 
} 

#divH1ImgLeft { 
    display: inline; 
    float: left; 
    /* 
    overflow: hidden; 
    */ 
} 

#divH1ImgRight { 
    display: inline; 
    float: right; 
    /* 
    overflow: hidden; 
    */ 
} 

#divWnfsHeader { 
    text-align: center; 
} 

しかし、もちろん、それは働いていないか、または他の私が助けを掲載されません。

<div id="divWnfsHeader"> 
    <hr> 
    <div id="divH1ImgLeft"><img src="../images/transBg.png" alt="WNFS Image" /></div> 
    <div id="divH1"--><h1>WNFS</h1></div> 
    <div id="divH1ImgRight"><img src="../images/transBg.png" alt="WNFS Image" /></div> 
    </div><!-- close divWnfsHeader --> 

そして、ここでは、私が最近試してみましたCSSです。私は左の画像でインデントされ、続いて大きなギャップがあり、次にH1の内容がインラインになり、最後に次の行の同じイメージの2番目のインスタンスが続きますが、実際には同じ行にありますがラップされていますか？

上記のさまざまなdivのさまざまなCSSパラメータの複数のバリエーションを試した後も、それ以上先はありません。 cssの誰かが手を貸して、私のCSSを助けてください。これを行うには

Answer 1

簡単な方法は、親にdisplay: flexを使用することで、hrのために、あなたはflex: 0 0 100%を使用することができますが、親にあなたがしてflex-wrap: wrapを設定する必要があります。

#divWnfsHeader { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
hr { 
 
    flex: 0 0 100%; 
 
}

<div id="divWnfsHeader"> 
 
    <hr> 
 
    <div id="divH1ImgLeft"><img src="../images/transBg.png" alt="WNFS Image" /></div> 
 
    <div id="divH1"--><h1>WNFS</h1></div> 
 
    <div id="divH1ImgRight"><img src="../images/transBg.png" alt="WNFS Image" /></div> 
 
</div><!-- close divWnfsHeader -->

Answer 2

それは、ブートストラップを介して行うことができます。

https://jsfiddle.net/896agnnx/

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 left"><img class="img-responsive" src="http://wmad.cs.vt.edu/images/code_background.png" alt="WNFS Image" /></div> 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right"><img class="img-responsive" src="http://www.edgesolutions.in/wp-content/uploads/apps-development.jpg" alt="WNFS Image" /></div> 
    </div><!-- close divWnfsHeader --> 

.left{ 
    margin:0; 
    padding:0; 
} 

.right{ 
    margin:0; 
    padding:0; 
}