HRef: Titel und Logo vertikal zentrieren.

[Christian001]

Hallo liebe Community,

ich weiß leider nicht mehr weiter.

Ich möchte die Logos und den Titel zu Href vertikal zentrieren.
Aber ich schaffe es nicht.

Aktuell ist es so das die Elemente innterhalb von <p></p> vertikal wie folgt angeordnet sind:
*) Das Logo liegt vertikal oben
*) Der Text liegt vertikal unten.

HeaderInfo.png
HeaderInfo-NEU.png

Mein Code:

<div id="HINFO">
  <div id="HMail">
    <p><a href="mailto:office@test.at">office@test.at - <img src="assets/images/1/Logo_Mail.png" alt="EMail" width="20" height="20"></a></p>
  </div>
  <div id="HTel">
    <p><a href="tel:+4301234567890">+43 (0) 123 456 789 0 - <img src="assets/images/0/Logo_Phone.png" alt="Telefon" width="20" height="20"></a></p>
  </div>
  <div id="HFace">
    <p><a href="https://www.facebook.com/test/" target="_blank" rel="noopener">Besuchen Sie uns auch auf - <img src="assets/images/b/Logo_Facebook.png" alt="Facebook" width="20" height="20"></a></p>
  </div>
  <div id="GPlus">
    <p><a href="https://plus.google.com/0001" target="_blank" rel="noopener">Folgen Sie uns auch auf - <img src="assets/images/8/Logo_GPlus.png" alt="Google Plus" width="20" height="20"></a></p>
  </div>
</div>

...
#header #HINFO {
    text-align:right;
    justify-self: end;
    align-self: center;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: end;
    -ms-grid-row-align: center;
}
#header #HINFO p {
    margin:0;
}
#header #HINFO a {
    margin:0;
    text-decoration:none;
}
#header #HLogo img {
    height:100%;
    text-decoration:underline;
}... 

[folkfreund]

Was genau möchtest du erreichen? Kannst du eine Skizze zeigen? Und gibt es vielleicht sogar schon eine URL, wo man deine Versuche sehen kann?

Gruß, folkfreund

[Christian001]

Hallo folkfreund,

die Skizze HeaderInfo-NEU.png

Homepage ist noch offline - daher gibt es noch keinen URL.

[folkfreund]

Ah, ok. Jetzt verstehe ich dein Anliegen.

Deine Logos haben alle eine feste Größe von 20x20 Pixel. Es ist mir aber nicht ersichtlich, welche Schriftgröße zum Einsatz kommt.

Ich würde es bei deiner HTML-Struktur mal so versuchen (ungetestet):

#header #HINFO p {
  line-height: 1.5em;
  min-height: 20px;
  vertical-align: middle;
}
#header #HINFO img {
  vertical-align: middle;
  width: 20px;
  height: 20px;
  display: inline-block;
}

Mein Favorit für solche Situationen wäre allerdings, die Bilder nicht als <img> einzubinden, sondern per CSS durch ::before oder ::after entweder als Zeichen aus einem Font (z.B. FontAwsome) oder als Background-Image. Vorteil: bei einer Designänderung musst du nicht den Seiteninhalt ändern, sondern du kannst einfach einen anderen Zeichensatz/andere Grafiken per CSS wählen.

Edit: CSS ergänzt

[Bennie]

Ich stimme folkfreund zu, würde das auch mit Pseudo-Klassen umsetzen, oder wenn Du es unbedingt so machen willst mit dem <img>, dann versuche es doch mit flexbox.
Wenn ich mir oben anschaue was du versucht hast, wolltest du wohl flexbox nutzen aber display:flex; kommt nicht vor.
Bei dem unteren Beispiel von folkfreund fehlt aber noch display:inline-block; , wenn ich das gewünschte Ergebnis richtig verstehe

Ach nee sehe gerade Du willst wohl alles vom a tag (Bild und Text )umschlossen haben, dann wie gesagt Pseudoklassen verwenden!

[Andreas]

Spielwiese: https://jsfiddle.net/Andreas/g11b8abq/

[folkfreund]

So meinte ich das! Danke Andreas :-)