イメージとh2が水平に整列しません

Question

フォームのヘッダーを作成しようとしています。ヘッダーにはimg（ロゴ）と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; 
} 

あり、同じ問題を持ついくつかの記事がありますが、すべての答えは同じです、IMGとH2要素にインラインブロックを置くが、それは私が望む方法では動作しません。このソリューションでは、ロゴの横にh2が表示されますが、上に余白があります。この上マージンはロゴと同じ高さです。

私はh2をロゴとインラインにします。

誰かがこの動作とその修正方法を説明できますか？

Answer 1

画像に追加するだけです。

https://jsfiddle.net/4pahqjr6/

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

Answer 2

あなたは

オプション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>

オプションを探しています。これは、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

H2にposition:absoluteを追加します。

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