Image and h2 won't align horizontaly

Question

I'm trying to make a header for a form. The header contains img (logo) and h2.

HTML:

<div>
     <img src="../ekspedit/rotografika-logo-80.png" alt=""/>
     <h2>PRIJAVA NEUSAGLAŠENOSTI</h2>
</div>

CSS:

img{
     display:inline-block;
}
h2{
     display:inline-block;
}

There are a few posts with the same problem, but all answers are the same: put inline-block on img and h2 elements, but that doesn't work the way I want it to. This solution displays h2 next to the logo but with top margin. This top margin is the same height as th logo.

I want the h2 to be inline with the logo.

Can someone explain this behaviour and how to fix it?

Answer 1

Just add to the image attributtes vertical-align:middle;

https://jsfiddle.net/4pahqjr6/

img{
 display:inline-block;
 vertical-align:middle;
}

Answer 2

Is this you are looking for

option 1

.one {
  display: table;
}
.one img {
  display: table-cell;
  vertical-align: middle;
}
.one h2 {
  display: table-cell;
  vertical-align: middle;
}

<div class="one">
     <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" alt=""/>
     <h2>PRIJAVA NEUSAGLAŠENOSTI</h2>
</div>

option 2

img{
     float:left;
}
h2{
     margin:0;
     padding-top:8%;
}

<div>
     <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" alt=""/>
     <h2>PRIJAVA NEUSAGLAŠENOSTI</h2>
</div>

Answer 3

Add position:absolute to h2:

h2{
   display: inline-block;
   position: absolute;
}