Formatierung im Grid

[MrMurphy1]

Hallo

Wieso

oder center?

?

Es kann doch nicht so schwer sein Containern Rahmen oder Hintergrundfarben mit auf ihren beschwerlichen Weg zu geben.

Die Ursache liegt wohl im CSS-Grid. Da das Verhalten im Firefox, Chrome und Opera auftritt kann ich deshalb nur vermuten, dass es auch so gewollt ist.

Die einzelnen Container nehmen genau die vom Inhalt vorgegebene Breite ein.

Der Text ist also durch deine CSS-Anweisung eigentlich rechtsbündig. Da der Container aber durch CSS-Grid nur so breit wie der Text ist erscheint er optisch zentriert. Da der Container linksbündig ist wird auch der darin enthaltene Text vermeintlich linksbündig angezeigt.

Gleiches gilt eigentlich auch für das Bild. Allerdings ist die Breite des Bildes mittels CSS auf 30% seiner eigentlichen Breite beschränkt. Hier erhält der umgebende Container wohl die Breite des Bildes bei 100% (= 150px), das Bild wird jedoch innerhalb dieser 150px nur mit 30%-Breite angezeigt, als Inline-Element gleichzeitig rechtsbündig.

Nachtrag: Das scheint auch mit den Prozentangaben zu tun zu haben. Wird dem Bild per CSS eine Breite von 50px zugewiesen ist der umgebende Container auch 50px breit. Wie beim Text wird dann auch das Bild vermeintlich linksbündig angezeigt.

Gruss

MrMurphy