Clever Geek Handbook

Keep middle element horizontally

I am trying to create my first custom header.

I want the middle element (like a logo) to stay centered , no matter how much content is on either side.

I tried to use z-index

but I believe it 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>
Run codeHide result


Here's my jsfiddle demo .

+3


source to share


2 answers


Try it like this: Demo 

.image img {
    z-index: 1000;
    width:18%;
    height:128px;
    position:absolute;
    left:50%;
    margin-left:-9%; /* half of the width */
}


HTML:

 <li class="image">
   <img src="http://www.plankdesign.com/wp-content/uploads/2011/01/html4.jpg" />
 </li>
+1


source


Check it out , you can change the code ( col-md-x

) as per your requirement.



0


source






More articles:


All Articles