DIV zentrieren (mal wieder...)

[Detlef G.]

Hallo Ralph

leider bin ich gerade mal wieder uebelst am Verzweifeln. Ich habe ein DIV, …

Muss es unbedingt ein Div sein?

Das funktioniert auch ganz prima. Problem: beim inneren DIV weiss ich nicht wie breit es ist. Das kann mal 100px, aber auch mal 500px haben. Gibt es also eine Möglichkeit, obiges Problem ohne fixe Angabe einer Breite zu lösen?

Eventuell so:

<div style="[code lang=css]width:500px;text-align:center;border:2px solid blue;">
  <span style="display:table;display:inline-block;margin:0 auto;border:2px solid red;">
    Bla Blub
  </span>
</div>
[/code]

Das ist allerdings nur kurz in Firefox und IE6 getestet.

Kurze Erklärung:

Bei display:inline-block verhält sich das Element teilweise wie ein Inlineelement, nimmt dadurch nur die Breite des Inhalts an (falls keine Breitenangabe erfolgt), hat ansonsten aber die Eigenschaften eines Blockelements, Höhe und Breite können angegeben werden, Rahmen umschließen das komplette Element und nicht die einzelnen Zeilen, falls ein Umbruch nötig wird.
Das display:table davor sorgt bei älteren Geckos (die display:inline-block noch nicht verstehen) dafür, dass auch dort bei einem eventuellen Zeilenumbruch der Rahmen ein Rechteck bildet und nicht die einzelnen Zeilen umschließt.

Es wird kein <div> (Blockelement), sondern Ein <span> (Inlinelement) verwendet, weil display:inline-block im IE (zumindest im 6er) sonst wirkungslos ist.

Auf Wiederlesen
Detlef