Setzen Sie das Symbol links von H1

Question

Ich möchte ein Symbol neben meiner Überschrift setzen. Aber es passt nicht richtig..wie kann ich das machen?

<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

Ich nehme an, Sie das Bild in der Mitte ausrichten möchten den Text anzupassen. Sie könnten einfach float die img und bearbeiten Sie ihre position für eine Pixel-perfekte Ausrichtung.

auch eine Menge unnötiger Wrapper Sie verwenden, all dies kann in den folgenden vereinfacht werden:

#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

Es ist auch möglich, es mit Inline-Blöcke zu tun.

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

Verwenden vertical-align: middle, so dass, wenn Sie die Größe der Text oder das Bild zu ändern, wird die Position automatisch ausgerichtet.

.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>