WordPress: DIVI vertical-align

Selten, aber dann doch manchmal ergeben sich Konstellationen bei denen ein Element vertikal ausgerichtet werden soll.

Mit CSS geschieht dies über den Befehl:

vertical-align

Dafür gibt es nach W3C CSS 2.1 Spezifikationen folgende existierende Werte:

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

Soweit die Theorie.

In der Praxis verhält sich das meistens ein wenig anders, da durch entsprechende CMS Lösungen, Themes und Frameworks wie auch Plugins/Erweiterungen sich die Stile gegenseitig das Leben schwer machen oder unterschiedliche Gewichtungen haben. Somit teilweise nicht erlaubt sind, gar einfach nicht funktionieren, weil es nicht vorgesehen ist.

Aktuell musste ich mich nach langer Zeit dem Konstrukt WordPress und DIVI in Verbindung damit beschäftigen und habe nach einigen Anläufen ein kleine – aber zumindest bei mir – funktionierende Lösung umsetzen können.

Grundsätzlich ist es wohl so, dass man im DIVI erlauben muss diese Formatierung auf eine Zeile anzuwenden. Dies geschieht über die Anweisung: Zeilen Einstellungen > Design: Größe einstellen – Spaltenhöhe ausgleichen: Ja.

1. DIVI Zeileneinstellungen Design

Sobald dies aktiviert ist, muss man in die entsprechende Spalte wechseln und dort dem Element die CSS Anweisung zuweisen. Das Eingabefeld dafür erreicht man über: Zeile > (entsprechende Spalte auswählen) Spalten Einstellungen > Erweitert: Benutzerdefinierte CSS – Hauptelement.

2. DIVI Spalteneinstellungen CSS

Und Überraschung – dort wird nun nicht vertical-align angegeben, sondern einen dynamische Anweisung für z.B. Außenabstände – im aktuellen Fall ist es:

margin: auto auto 0;

Dies hatte in meinen konkreten Fall die Folge, das eine Bilddatei, die sich zwischen zwei Textblöcken befand nun immer am Boden (bottom) ausgerichtet wird, da der Bereich über dem Bild auto. mit einen Außenabstand „aufgefüllt“ wird.

Doch wo ist die Anweisung für vertical-align? Wenn ich das richtig verstanden habe, wird dies durch die Anweisung der Spaltenhöhe ausgleichen (Siehe Abbildung 1.) erlaubt/aktiviert und vom CMS bzw. Framework dann angewendet.

Ich denke jeder sollte sich das mal in ruhe anschauen und damit experimentieren :)