H1の左にアイコンを入れます

Question

私の見出しの横にアイコンを入れたいと思います。しかし、それは正しくフィットしません。どうすればこのフィットを作ることができますか？

<div style="width:100%;"> 
 
<div style="float: left;width:7%;min-width:40px;"> 
 
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /></div> 
 
<div style="float: left;width:93%;"> 
 
<h1>My heading</h1> 
 
</div> 
 
</div>

Answer 1

私はあなたがテキストを一致させるために途中で画像を配置するとします。 floatimgと入力して、positionを編集して、ピクセルに完全に合わせることができます。

また、あなたが不要なラッパーの多くを使用している、このすべては、次のように単純化することができます。

#myHeading img { 
 
    float:left; 
 
    margin-right:10px; 
 
    position: relative; 
 
    top:2px; 
 
}

<div id="myHeading"> 
 
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /> 
 
    <h1>My heading</h1> 
 
</div>

Answer 2

インラインブロックでそれを行うことも可能です。

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

<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" alt=""> 
 
<h1>My heading</h1>

Answer 3

使用垂直整列：テキストや画像のサイズを変更する場合は、位置が自動的に整列されるように、真ん中。

.myHeading img { 
 
    margin-right:10px; 
 
} 
 
.myHeading h1, .myHeading img { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<div class="myHeading"> 
 
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /> 
 
    <h1>My heading</h1> 
 
</div> 
 

 
<div class="myHeading"> 
 
    <img height="60px" src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /> 
 
    <h1>My heading</h1> 
 
</div> 
 

 
<div class="myHeading"> 
 
    <img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /> 
 
    <h1 style="font-size:70px;">My heading</h1> 
 
</div>