DIV mit automatischer Breite zentrieren

Neku

Hallo zusammen,

ich schreitere gerade an dem Versuch, ein DIV mit automatischer Breite zu zentrieren. Damit margin: auto; funktioniert, muss das DIV eine width-Angabe != auto haben, was ich aber nicht kann, da die Breite des Inhalts variabel ist.

Kennt jemand einen anderen Weg?

Grüße,
Marc

Hallo,

eine Möglichkeit wäre z.B. die Folgende:

Du packst ein <div> um dein eigentliches Zielelement drum herum, diesem <div> weist du "text-align: center;" zu.
Du weist deinem Zielelement "width: auto;" zu.
Du weist deinem Zielelement "display: inline;" zu.

Dies funktioniert, ist aber leider relativ umständlich. Grundvariable Layouts kannst du damit weniger sinnvoll gestalten. Wenn es dir um die grobe Strukturierung deiner Webseite geht, würde ich dir eher zu einem dynamischen Layout mit Breitenangaben in Prozent oder em raten!

Headhunter

Ne Javascriptschweinerei ging noch:

// OFFSET = Höhe o. Breite / 2
document.getElementById("the_div").style.top = (screen.availHeight)/2-OFFSETY + "px";
document.getElementById("the_div").style.left = (screen.availWidth)/2-OFFSETX+ "px";

Neku

árn[y]ék schrieb:

Hallo,

eine Möglichkeit wäre z.B. die Folgende:

Du packst ein <div> um dein eigentliches Zielelement drum herum, diesem <div> weist du "text-align: center;" zu.

Du weist deinem Zielelement "width: auto;" zu.

Du weist deinem Zielelement "display: inline;" zu.

Dies funktioniert, ist aber leider relativ umständlich. Grundvariable Layouts kannst du damit weniger sinnvoll gestalten. Wenn es dir um die grobe Strukturierung deiner Webseite geht, würde ich dir eher zu einem dynamischen Layout mit Breitenangaben in Prozent oder em raten!

Ich vergaß zu erwähnen, dass es sich bei dem Inhalt des DIVs um floatende Elemente handelt. Wenn ich dem DIV nun eine eine feste oder relative größe gebe, wird das DIV selbst zwar zentriert, der Inhalt wird abwe weiterhin links ausgerichtet.
text-align: center; richtet die floatenden Elemente nicht aus.
width: auto; müsste eigentlich der Standardwert sein, bringt auch nichts wenn ich es setze.
display: inline; wird von den im DIV enthaltenen Block-Elementen wieder überschrieben, da Inline-Elemente keine Block-Elemente enthalten dürfen.

Ich vermute, dass es gar überhaupt nicht möglich ist
Dennoch danke für die Antworten soweit.