html - Header 1 between 2 images -

html - Header 1 between 2 images -

i need create h1 images on both sides.

it needs on 1 line , has responsive.

like this, ==== image of little line:

=========header text============

current code is:

<h1><img src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> of watches &amp; men <img src="{{media url="wysiwyg/mintbar.png"}}" alt="" /></h1>

any idea? in advance!

have images , h1 title set inline-blocks: http://jsfiddle.net/

html:

<img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> <h1>of watches &amp; men</h1> <img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" />

css:

#image-surround { display: inline-block; } h1 { display: inline-block; }

of course, you'll need have container have responsive. http://jsfiddle.net/qn8dnvmg/4/

html:

<div class="container"> <div class="columns onethird"> <img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> </div> <div class="columns onethird"> <h1>of watches &amp; men</h1> </div> <div class="columns onethird"> <img id="image-surround" src="{{media url="wysiwyg/mintbar.png"}}" alt="" /> </div> </div>

css:

.container { position: relative; margin: 0 auto; padding: 0; width: 960px; padding-left: 10px; padding-right: 10px; } .container .column, .container .columns { float: left; display: inline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 2px; padding-right: 2px; } .row { margin-bottom: 20px; } .clear { clear: both; height: 1px; width: 100%; } .container .onehalf.columns { width: 50%; } .container .full.columns { width: 100%; } .container .onethird.columns { width: 33.33%; } .container .twothirds.columns { width: 66.66%; } .container .onequarter.columns { width: 25%; } .container .twoquarters.columns { width: 50%; } .container .threequarters.columns { width: 75%; } .container .onefifth.columns { width: 20%; } .container .twofifths.columns { width: 40%; } .container .threefifths.columns { width: 60%; } .container .fourfifths.columns { width: 80%; } .container .oneeight.columns { width: 12.5%; } .container .twoeights.columns { width: 25%; } .container .threeeights.columns { width: 37.5%; } .container .foureights.columns { width: 50%; } .container .fiveeights.columns { width: 62.5%; } .container .sixeights.columns { width: 75%; } .container .seventeights.columns { width: 87.5%; } .container .onetenth.columns { width: 10%; } .container .twotenths.columns { width: 20%; } .container .threetenths.columns { width: 30%; } .container .fourtenths.columns { width: 40%; } .container .fivetenths.columns { width: 50%; } .container .sixtenths.columns { width: 60%; } .container .seventhtenths.columns { width: 70%; } .container .eighttenths.columns { width: 80%; } .container .ninetenths.columns { width: 90%; }

and media queries etc.

html css header