css do flankowania zawartości `h1` z plikami na tej samej linii

Question

Próbuję flankowac znaczniki h1 z dwoma instancjami tego samego obrazu po obu stronach poziomo wyśrodkowanymi na stronie. Mam następujące HTML:

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

A oto CSS Mam ostatnio próbowałem:

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

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

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

#divWnfsHeader { 
    text-align: center; 
} 

Ale oczywiście to nie działa, albo nie będę delegowania o pomoc. Kończę lewym obrazem, wciętym, a po nim dużą przerwą, a następnie wstawioną treścią, a następnie drugą instancją tego samego obrazu w następnej linii, ale być może jest ona faktycznie w tym samym wierszu, ale jest zawijana?

Po wypróbowaniu wielu odmian różnych parametrów css dla różnych elementów div wymienionych powyżej, nadal nie jestem dalej od przodu. Czy ktoś w css-know może pożyczyć pomocną dłoń i pomóc mojej css?

Answer 1

Prosty sposób, aby to zrobić jest użycie display: flex na rodzica i dla hr można użyć flex: 0 0 100% ale na rodzica należy ustawić flex-wrap: wrap wtedy.

#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

To może być wykonane przez bootstrap:

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; 
}