I'm trying to make my first custom header.
I want the middle item (eg. the logo) to stay centered regardless of how much content is on either side.
I tried using z-index
but I believe that was wrong.
HTML:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
text-align: center;
}
.image {
z-index: -1;
}
<div id="header_container">
<div id="header">
<ul class="flex-container">
<li class="flex-item">Menu items 1 BHello | seven | eight | nineteen | Fitiyytwooooo
</li>
<li class="image">
<img src="http://www.plankdesign.com/wp-content/uploads/2011/01/html4.jpg" style="width:204px;height:128px;">
</li>
<li class="flex-item">Menu items 2 Blah | Blah | Blah</li>
</ul>
</div>
</div>
Here's my jsfiddle demo.
Try like this: Demo
HTML: