css to flank `h1` content with imgs on the same line - css

Question

I am trying to flank h1 tags inline with two instances of the same image on either side horizontally centered on the page. I have the following 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 -->
And here is the CSS I have most recently tried:
#divH1 {
display: inline;
/*
overflow: hidden;
*/
}
#divH1ImgLeft {
display: inline;
float: left;
/*
overflow: hidden;
*/
}
#divH1ImgRight {
display: inline;
float: right;
/*
overflow: hidden;
*/
}
#divWnfsHeader {
text-align: center;
}
But of course it is not working or else I wouldn't be posting for help. I end up with the left image, indented and followed by a large gap and then the H1 content inline, and finally followed by the second instance of the same image on the next line, but perhaps it is actually on the same line but wrapped?
After trying multiple variations of different css params for the different divs detailed above I am still no further ahead. Could someone in the css-know please lend a hand and help my css along?

Answer 1

Simple way to do this is to use display: flex on parent and for hr you can use flex: 0 0 100% but on parent you should set flex-wrap: wrap then.
#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

It can be done through 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;
}