align logo und h1, um vollen Titel responsive zu erhalten

Question

Ich habe einen Titel, der aus zwei Wörtern besteht, das erste Wort erscheint im Logo, das zweite ich füge es mit einem h1 hinzu. Wie gehe ich vor, um Bild und h1 auszurichten, um den vollen Titel zu erhalten und reagiert? Das Ergebnis, das ich bekommen will, ist so etwas wie diese: http://i65.tinypic.com/34t9ukj.png

Die HTML ist:

<div id="header"> 
    <a href="xxxxx.html"> 
     <img src="img/logo.jpg" id="logo" alt="logo"> 
     <h1 id="titolo_logo"> Abbigliamento </h1> 
    </a> 
</div> 

Answer 1

Sie Flexbox verwenden können, mit dem a Tag als Behälter und align-items: center; die vertikal zentrierte Ausrichtung zu erhalten:

#header a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
h1 { 
 
    margin-left: 10px; 
 
}

<div id="header"> 
 
    <a href="xxxxx.html"> 
 
    <img src="http://placehold.it/150x150/fb3" id="logo" alt="logo"> 
 
    <h1 id="titolo_logo"> Abbigliamento </h1> 
 
    </a> 
 
</div>

Eine zweite Lösung wäre, um die inneren Elemente Inline-Blöcke zu machen, mit den folgenden Einstellungen:

#header a > img, 
 
#titolo_logo{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#titolo_logo { 
 
    padding-left: 10px; 
 
}

<div id="header"> 
 
    <a href="xxxxx.html"> 
 
    <img src="http://placehold.it/150x150/fb3" id="logo" alt="logo"><h1 id="titolo_logo">Abbigliamento</h1> 
 
    </a> 
 
</div>

Der Nachteil ist, dass in diesem Fall nicht der ganzen Kopfbereich (die ich nehme an, das soll sein) ist als Link anklickbar, aber nur das Bild und die h1 selbst, während man in der flexbox-Lösung auch über und unter h1 klicken kann, um den Link zu öffnen.