mehrere divs nebeneinander zentriert

[Felix Riesterer]

Lieber kammerjaeger,

mehrere Divs nebeneinander zentriert auszurichten.

die <div>-Elemente bräuchten die display-Eigenschaft "inline-block", damit sie sich wie Buchstaben in einem Fließtext verhalten und je nach verfügbarem Platz nebeneinander anordnen. Wenn dieser "Fließtext" (also das Elternelement), in welchem die Elemente stehen, mit text-align: center eingestellt ist, richten sie sich auch mittig aus. Das Prinzip mit dem Floating kann das aufgrund seines anderen Visualisierungskonzeptes nicht leisten, daher ist Dein Ansatz mit float: left, was das Zentrieren angeht, zum Scheitern verurteilt. Mit vertical-align kann man dann anschließend steuern, wie die unterschiedlichen Höhen angeordnet werden ("stehend", "hängend" oder zentriert).

Damit alle nebeneinander passen, muss logischerweise die gesamte Breite aller <div>-Elemente in das Elternelement (in Deinem Falle wohl auch ein <div>-Element) passen. Daher muss von jedem dieser <div>-Elemente die Werte für "width", "margin", "padding" und "border-width" zusammenaddiert werden, um die endgültige Breite zu erhalten. Wenn diese dann kleiner oder gleich der Breite des Eltern-Elements ist, dann stehen sie nebeneinander.

Liebe Grüße,

Felix Riesterer.