HTML h1 wird nach unten von img

Question

ausgerichtet Ich habe eine IMG und dann eine h1 daneben in einer Kopfzeile. Hier ist der Code:

<header class="site-header"> 
    <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo"> 
    <div class="first-level-header"> 
    <h1>Name of website</h1> 
    </div> 
</header><!-- /site-header --> 

Und die CSS:

h1 { 
display: inline; 
font-family: sans-serif; 
color: blue; 
} 

img.site-logo { 
    display: inline; 
    padding-top: 10px; 
    padding-left: 10px; 
    width: 125px; 
    height: 125px; 
} 

Meine Frage ist: Wie habe ich das h1 Aufenthalt auf der Oberseite statt an den unteren Rand des Bildes ausgerichtet sind.

Weitere Informationen: Dies ist ein Wordpress-Thema, wenn das irgendetwas bedeutet. Ich habe auch andere Tonnen von Sachen, verschiedene Bilder, verschiedene Plätze im Dokument versucht, das h1 zu a p ändernd, etc.

Dank im Voraus.

Answer 1

Sie können es mit einem Element mit vertikaler Ausrichtung versuchen. Zum Beispiel können Sie in Ihrem CSS hinzufügen:

vertical-align: center 

Answer 2

Wenn Sie nächstes wollen, dass dieses Bild CSS folgen:

img.site-logo { 
    display: inline; 
    padding-top: 10px; 
    padding-left: 10px; 
    width: 125px; 
    height: 125px; 
    float:left; 
} 

Wenn Sie über dem Bild follw diesen HTML wollen:

<header class="site-header"> 
    <div class="first-level-header"> 
    <h1>Name of website</h1> 
    </div> 
    <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo"> 

</header><!-- /site-header --> 

Answer 3

Nach stundenlangen Tests habe ich festgestellt, dass wenn Sie das h1 mit einem div umgeben und das div auf lotrecht ausrichten: top; Es klappt.

Beispiel:

HTML:

<header class="site-header"> 
    <img src="<?php bloginfo('template_directory');?>/logo.svg" alt="Logo" class="site-logo"> 
    <div class="first-level-header"> 
    <h1>Name of website</h1> 
    </div> 
</header><!-- /site-header --> 

CSS:

.first-level-header { 
    display: inline-block; 
    vertical-align: top; 
} 

h1 { 
    font-family: sans-serif; 
    color: blue; 
} 

img.site-logo { 
    display: inline-block; 
    padding-top: 10px; 
    padding-left: 10px; 
    width: 125px; 
    height: 125px; 
}