Bild und h2 werden nicht horizontal ausgerichtet

Question

Ich versuche, eine Überschrift für ein Formular zu erstellen. Die Kopfzeile enthält img (logo) und 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; 
} 

Es gibt ein paar Stellen mit dem gleichen Problem, aber alle Antworten sind die gleichen: setzen inline-block auf img und h2-Elemente, aber das funktioniert nicht so, wie ich es möchte. Diese Lösung zeigt h2 neben dem Logo, jedoch mit oberem Rand an. Dieser obere Rand hat dieselbe Höhe wie das Logo.

Ich möchte die h2 inline mit dem Logo sein.

Kann jemand dieses Verhalten erklären und beheben?

Answer 1

Nur zum Bild hinzufügen attributes vertical-align: middle;

https://jsfiddle.net/4pahqjr6/

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

Answer 2

Ist das Sie suchen

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

position:absolute zu h2 hinzufügen:

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