yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Wie zentriere ich einen Block richtig?



Variante 1:
Code:
<center>Inhalt</center>

Die meisten Browser interpretieren dieses Tag (noch) - es gehört schon lange nicht mehr zu HTML-Standard. ("Deprecated")

Variante 2:
Code:
<div align="center">Inhalt</div>

Diese Version funktioniert ebenso - aber auch diese fliegt aus dem HTML-Standard. Für Layoutfragen ist CSS zuständig. ("Deprecated")

Variante 3:
Code:
alignment:center;

Diese Möglichkeit gab es kurze Zeit im CSS-Standard, ist aber schon wieder verschwunden.

Variante 4:
Code:
text-align:center;

Wenn man nach align sucht, wird man nur text-align und vertical-align finden. Der Internet Explorer interpretiert es sehr freizügig und versteht damit nicht nur Text. Andere Browser interpretieren es so, wie der Sinn es vorgibt: ein Text wird rechtsbündig/zentriert/linksbündig.

Variante 5:
Code:
margin-left:auto;
margin-right:auto;

oder
Code:
margin:auto;

Diese Eigenschaften weist man allerdings nicht denm übergeordneten Element zu (d.h. man würde den Inhalt des Elementes zentrieren), sondern direkt dem Element, was zentriert dargestellt werden soll. Es sagt soviel aus, daß der Abstand links und rechts zum Rand automatisch vergeben werden soll. Wenn rechtsbündig erwünscht ist, müßte man nur margin-left:auto; schreiben. Allerdings tut sich dabei der IE wieder einmal schwer.

Korrekter Einsatz: Variante 5
Empfolener Einsatz: Variante 4 und 5 kombiniert

Geschrieben von René am 18.06.2004 (8451x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Interessant, wenn man sich das mal alles vor Augen führt...



Ich persönlich nutze z.Z. Variante 4, wenn ich was schreibe.
Geschrieben von Phil Marx
Von Variante 1, 2 und 4 wusste ich bereits, ist aber nett zu wissen, wie man den text noch zentrieren kann. Zum Einsatz kommt bei mir Variante 2 oder 4. Für normalen Text empfiehlt es sich übrigens <span style="text-align: center;"></span> zu nehmen, da das DIV Element ja eigentlich für Layer gedacht ist...
Geschrieben von michi
Hinweis: das ist nicht direkt für Textabsätze geschrieben, deren Inhalt z.B. zentriert ist, sondern um z.B. ein ganzes Seitenlayout zu zentrieren ...



@phil: für die Seite nutzt du Variante 2 - blinde Tabellen, mit align="center".



<div> heißt für mich so viel wie <diverses> ... also ohne besondere strukturelle Bedeutung. <span> ist auch so ein Tag, der Unterschied ist nur, daß <div> ein blockorieniert ist (d.h. es wird in der Regel ein ganzer Absatz), während ich <span> auch innerhalb einer Zeile einsetzen kann ...
Geschrieben von René
jap, da hast du recht, also mit dem unterschied zw. DIV und SPAN :)



und genau desshalb nutzt man DIVs auch für Layer. span nutze ich innerhalb von DIVs um ggf. einzelne Zeilen anders zu formatieren / auszurichten. Glaube das ist bei meinem letzten Comment falsch rübergekommen :D
Geschrieben von michi
Rene, das Grundgerüst von yubb.de ist schon n bissl älter...



Und ich habe meinen Coding-Stil verändert, aber nicht überall geändert. Das kommt dann irgendwann in einem großen Rundumschlag.. SEID FROH, DASS IHR DIE SCRIPTE NICHT SEHT *gg* Zur Zeit zumindest noch...
Geschrieben von Phil Marx
ohje, Phil... das kenne ich irgendwoher,...

Wenn ich heute Scripts von damals anschaue und meine dummen Fragen im Forum hier... Dann bin ich auch froh, das ich mittlerweile um einiges besser bin ;D



Bin mal gespannt auf den yubb.de Relaunch :p
Geschrieben von michi
ein kleiner Fehler: im 5. Abschnitt:



>>Wenn rechtsbündig erwünscht ist, müßte man nur margin-left:0px;<<



das müßte da auch auto heißen. Ein bekannter gab mir den Hinweis, daß für zentrieren auch margin:auto; reichen würde - das umfaßt aber auch das horizontale/vertikale ...
Geschrieben von René
Korrigier es doch... Du hast die Rechte dazu als Autor...
Geschrieben von Phil Marx