Horizontal zentrieren

Ich habe so einen div

<div align="center">...</div>

in meinem Quellcode um Inhalt (der nicht nur aus Text besteht und nicht fest gesetzte Breite hat) horizontal zu zentrieren. Ich würde das gerne durch entsprechendes CSS ersetzen. Es wird ja auto für margin-left und margin-right angeraten. Das reicht in meinen Tests aber nicht aus (der div ist linksbündig):

<html><head><title></title></head><body>

<div style="margin-left:auto; margin-right:auto;">
  <h2>Einloggen</h2>
  <input type="button" value="Einloggen"/>
</div>

</body></html>

Mit ein bisschen herumprobieren hat sich ergeben, dass es mit dem zusätzlichen Style display:table funktioniert.

Jetzt meine Frage: Ist das mit dem display:table im Verbund mit den auto-margins so usus oder schlechter Stil? Gibt es Alternativen?
Die Ressourcen im Internet scheinen sich auf fix gesetzte Breiten zu setzen, was ich aber untragbar finde.

alogheo

mit

margin: 0 auto

zentrierst du das gesamte <div>. Dadurch, dass ein <div> als auto-Breite 100% hat, wird es nicht zentriert. Erst wenn man dem <div> eine Breite gibt. Das display:table hat bewirkt, dass das <div> wie ein Inline-Element funktioniert, so dass sich die Breite an dem Inhalt des <div>s orientiert.
Für die Zenrtierung von Texten solltest du text-align:center verwenden.
Oder du nimmst ein <span> (=Inline-Element) und zentrierst dies mit margin:0 auto

Ok, danke für deine Antwort!

Nur was ich dann nicht verstehe: Ein display:inline statt display:table funktioniert nicht. Lässt sich display:inline nicht auf <div>s anwenden?

alogheo

webber schrieb:

Nur was ich dann nicht verstehe: Ein display:inline statt display:table funktioniert nicht. Lässt sich display:inline nicht auf <div>s anwenden?

Sorry, da hatte ich was falsch aus dem Gedächtnis aufgeschrieben. Inline-Elemente lassen sich nicht mit margin:0 auto zentrieren. Außerdem funktioniert margin: 0 auto auch nur, wenn man eine Breite angibt. Warum display:table funktioniert kann ich nicht genau sagen, vermute aber, dass dadurch eine Breite festgesetzt wird.

Mittlerweile hab ich mich mal durch die Specs gewühlt und ja, genau das stimmt:

alogheo schrieb:

Warum display:table funktioniert kann ich nicht genau sagen, vermute aber, dass dadurch eine Breite festgesetzt wird.

Bei Tables wird zuerst immer die Breite bestimmt, wodurch das div dann eine feste Breite hat und auto-margin wirken kann.
Merkwürdig finde ich nur, dass die Leute keine bessere Lösung für das horizontale Zentrieren spezifiziert haben. Kann ja nicht sein, dass alle mit festen Breiten arbeiten oder Tables definieren müssen