DIV zentrieren (mal wieder...)

[Ralph]

Liebe Selfer,

leider bin ich gerade mal wieder uebelst am Verzweifeln. Ich habe ein DIV, das ich gerne zentriert darstellen möchte. Nach einiger Zeit habe ich jetzt folgende Loesung gefunden:

<div style="width:500px;text-align:center">
  <div style="width:100px;margin:0 auto">
    Bla Blub
  </div>
</div>

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?

Danke euch,
Ralph

[Steel]

Hallo,

Was soll denn das aeussere Div?! Mit margin: 0 auto haste doch alles was Du benoetigst. Egal wie gross das Div ist.

Oder was meinst Du genau?

[vaudi]

Hallöchen,

Was soll denn das aeussere Div?! Mit margin: 0 auto haste doch alles was Du benoetigst. Egal wie gross das Div ist.

Das äußere DIV braucht der IE, damit das innere DIV zentriert wird.

Und wenn das innere DIV keine width-Angabe bekommt, ist es so width wie das äußere DIV.

Bin nämlich grad an dem selben Problem, leider bisher auch ohne brauchbare Lösung.

MfG
vaudi

[Steel]

Hi!

Das äußere DIV braucht der IE, damit das innere DIV zentriert wird.

Aehm. Nein? Meiner hier (IE6) jedenfalls nicht.

margin:auto zentriert das entsprechende Element.

Was funktioniert bei Dir am Beispiel der FAQ denn nicht?

Und wenn das innere DIV keine width-Angabe bekommt, ist es so width wie das äußere DIV.

Natuerlich. Blockelemente haben gewoehnlich ja auch 100% width vorgegeben.

[vaudi]

Hallöchen,

Das äußere DIV braucht der IE, damit das innere DIV zentriert wird.

Aehm. Nein? Meiner hier (IE6) jedenfalls nicht.

margin:auto zentriert das entsprechende Element.

Aber nur, wenn das Element kleiner ist als sein übergeordnetes Element. Sonst ist "auto" wirkungslos.

Ich hab ein (äußeres) DIV als Fußzeile. Darin ein inneres DIV, in dem ein dynamisch erzeugter Text steht. Der sichtbare Rahmen des inneren DIVs soll den Text gleichmäßig umschließen.

Das Problem dran ist: Ohne width-Angabe ist das innere DIV so breit wie das äußere. Es soll sich aber einem kürzeren Text in der Breite anpassen. Tut es aber nicht. Und wenn ich eine feste Breite vergebe, sieht das Ergebnis meist besch... aus.

Was funktioniert bei Dir am Beispiel der FAQ denn nicht?

Die Tabelle im Beispiel macht genau das, was ich will. Was ich suche ist eine Lösung, diesen Effekt ohne Tabelle zu erreichen.

MfG
vaudi

[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

[Ralph]

Hallo liebe Selfer!

Erstmal danke euch fuer eure Antworten, vor allem Steel, hab was gelernt :-)
Ich habe es aber zwischenzeitlich anders geloest. Das innere DIV kommt bei mir jetzt aus einem Template und ich gebe dort einfach individuell die Breite fix an. Ist nur unwesentlich mehr doppelt gemoppelt, und funzt prima :-)

Danke nochmal,
Ralph

[Detlef G.]

Hallo Ralph

… und ich gebe dort einfach individuell die Breite fix an.

Hoffentlich tust du das in em und mit ausreichender Toleranz.
Du kannst ja kaum vorher wissen, welche Schriftgröße dein Seitenbesucher eingestellt hat, und ob die von dir angegebene Schriftart auf seinem System überhaupt vorhanden ist, oder der Browser eine Ersatzschriftart verwendet, die eventuell eine andere Laufweite hat.

Auf Wiederlesen
Detlef