How to center images vertically these divs?

Question

I'm stuck trying to align images vertically inside the container divs.

This is my html:

<div class="navbar">
  <div class="back">
      <img src="http://s16.postimg.org/m5yrst5k1/back_icon.png">
  </div>
  <div class="title">
      <h1>title</h1>
  </div>
  <div class="menu">
      <img src="http://s8.postimg.org/hmusw99pt/menu_icon.png">
  </div>
 </div>

And this is the css:

html,body{
  height: 100%;
  width: 100%;
  padding:0;
  margin:0 auto;
}

.navbar {
  background: #09c;
  width: 100%;
  height: 75px;
  z-index: 99999;
  box-shadow: 0 0 10px #000;
}

.navbar .back {
position: absolute;
left: 0;
padding:2% 0 0 1%;

}

.navbar .menu{
  position: absolute;
  right: 0;
  padding: 2% 1% 0 0;
}

.navbar .title{
  position:absolute;
  text-align: center;
  width: 100%;
  color: white;
}

I know I can use some media-queries to set to top margin so the images are always vertically centered, but there must be a better way to do that.

I also tried something like this with no success:

img{
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

How should I center the images vertically so it is always responsive?

This is my codepen:

http://codepen.io/anon/pen/mLxei

Thanks in advance!

possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Mooseman, Jun 18 '14 at 14:08

score 2 · Accepted Answer · answered Jun 18 '14 at 14:14

2

You need to keep div in the flow and use display:inline-block to vertical-align them to each other. DEMO

You can then trigger text-align:justify on the first line adding a pseudo element drawing an invisible second line .

html,body{
  height: 100%;
  width: 100%;
  padding:0;
  margin:0 auto;
}

.navbar {
  background: #09c;
  width: 100%;
  height: 75px;
 text-align:justify;
  box-shadow: 0 0 10px #000;
}

.navbar .back ,
.navbar .menu,
.navbar .title{
  display:inline-block;
  vertical-align:middle;
  margin:0 1em;/* optionnal*/
}
/* trigger justify if only 1 line */
.navbar:after {
  content:'';
  width:99%;
  display:inline-block;
}

You can eventually add line-height:75px to navnar and reset it to 1.2em to navabar child if you want vertical-middle to be set from navbar demo 2 it doesn't make much difference here.

answered Jun 18 '14 at 14:14

G-Cyrillus

101,410
14
105
129

just for curiosity, why is this happening http://codepen.io/anon/pen/hCmtD when the white spaces from the main divs are removed? – Boel Jun 19 '14 at 00:42
1

@Boel this happens cause each inline-boxes , touching each others behaves like a whole word . A B C , is treated as 3 separated letters , ABC is treated as a single word, inline-boxe and letters behave the same as being inline content in the flow. – G-Cyrillus Jun 19 '14 at 07:08
1

@Boel you may use flexbox if your HTML is minified : http://codepen.io/gc-nomade/pen/wcdFr – G-Cyrillus Jun 19 '14 at 07:15

score 0 · Answer 2 · answered Jan 19 '18 at 09:09

0

Here's what you need to do:

<style>
.image-container {
     display:table-cell;
     margin:auto;
     vertical-align:middle;
 }
</style>

<div class="image-container"><img src="{IMAGE_URL}"/></div>

answered Jan 19 '18 at 09:09

Shri Shinde

309
3
6

How to center images vertically these divs?

2 Answers2