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.