Gedankenquerbeet
Vor 2 Jahren

text-align: justify;

Bilder mit text-align: justify; ausrichten

Bilder, divs, spans oder Listenelemente mit text-align: justify; auszurichten ist nicht schwierig.

<div class="box">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>
.box {
   text-align: justify;
}

.box > div {
   display: inline-block;
}

.box:after {
   content: "";
   display: inline-block;
   width: 100%;
}

Allerdings kann es passieren, dass ein kleiner Fehler dafür sorgt dass text-align: justify; ignoriert wird.

Mögliche Fehler

Ein Fehler ist beispielsweise die auszurichtenden Elemente, in der HTML Datei nicht mit Zeilenumbrüchen voneinander zu trennen.

<div class="box">
   <div></div><div></div><div></div><div></div><div></div><!-- Funktioniert nicht! -->
</div>

Gerade bei über PHP (oder ähnlichem) erzeugten HTML Markup kann es schnell zu diesem Fehler kommen, wenn nämlich am Ende der echo Anweisung ein PHP_EOL vergessen wird. Diese Konstante liefert den nötigen Markup Zeilenumbruch.


Ein weiterer Logik Fehler ist, den :after CSS Teil auszulassen. Dieser sorgt nämlich dafür, dass eine unsichtbare "Reihe" hinzugefügt wird. Diese unsichtbare Reihe ist notwendig um die letzte richtige Reihe auszurichten. text-align: justify; richtet nämlich die letzte Reihe nicht aus. Wenn also nur eine Reihe existiert und erwähntes vergessen wird, scheint es so als wenn text-align: justify; ignoriert wird.

Kommentar verfassen



Kommentare
aFlex - 13.12.2017 06:12
Es gibt leider eine Nebenwirkung vom vorgestellten Stylesheet. Da im .box::after wegen width: 100% eine neue Zeile hinzugefügt wird, vergrößert sich das div.box um die definierte line-height. Es ist also entsprechend viel Platz unter den Elementen. Man kann versuchen, es zu beheben, aber es lohnt sich nicht. (Übrigens sollte man seit CSS 3 Pseudoelemente wie ::aftermit zwei Doppelpunkten schreiben, Pseudoklassen wie :hover, :focus und :nth-child() hingegen mit einem.) Denn: Es gibt eine viel elegantere Lösung (CSS 3 sei Dank!), die von allen aktuellen Browsern unterstützt wird. Das vollständige Stylesheet verkürzt sich dadurch auf: .box { display: flex; justify-content: space-between; } Mit Flexbox funktioniert es auch, wenn man zwischen den Elementen keine Whitespaces hat. Ich habe es mal in einem Codepen verglichen: https://codepen.io/anon/pen/RxNjLb
Wie man Bilder mit text-align: justify positioniert Warum funktioniert text-align: justify; nicht? Wie funktioniert text-align: justify? Divs ignorieren text-align: justify; text-align: justify wird ignoriert