djr: Logo definiert Zeilenhöhe. Das soll es nicht.

Beitrag lesen

problematische Seite

Wie soll das Logo den vertikal ausgerichtet sein?
Ggf. würde es die Zeile darüber dann teilweise überdecken.

Da das Logo ja in der letzten Zeile steht, reicht evtl. ein vertical-align: text-top; oder vertical-align: top;. Dadurch wird die Zeile nach untenhin vergrößert.

Im Falle einer beabsichtigten Überdeckung der vorangegangenen Zeile(n), ist eine Positionierung der richtige Weg.

<span class="wrap">
  <img src="" alt="" />
</span>
/* Positionierungsanker */
.wrap {
  position: relative;
}

/* Bild aus dem Textfluss nehmen und vertikal ausrichten */
.wrap > img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Da das Logo nun außerhalb des Textflusses ist, würde evtl. nachfolgender Text hinter dem Bild liegen. Dann hilft es, den .wrap um ein display: inline-block; und ein width: mit Angabe der Bildbreite zu ergänzen. Tipp: width im style-Attribut des Wrappers angeben, statt in der CSS-Datei, macht das Konstrukt wiederverwendbar und die Bildbreite lässt sich evtl. über ein Script einfügen.