Der CENTER Tag, deprecate und mit CSS? Einstellungen

[Conny]

Hallo,
früher konnte man *alles* was irgendwie in der Mitte sollte mit dem <center> Tag zentrieren.
Klar, das geht zwar heute auch noch, aber, man sollte es sich abgewöhnen...(in HTML heißt das wohl deprecated )
Schade eigentlich, denn bis dato habe ich keine redliche Alternative im CSS Bereich gefunden.
text-align: center; geht, aber auch nicht für alles! (ausser bei dem IE natürlich )

Wie zentriert man z.B. alles was in einem DIV-Container steht zur mitte?
(also inklusive Text, Tags, Bilder, etc.)

<DIV style:text-align: center;> dürfte da wohl nicht ganz reichen...

Any suggestions?

Conny

[Ede]

Hi Conny,

schon mal mit margin: auto versucht?

[Conny]

Hallo,

...schon mal mit margin: auto versucht?...

Ja, aber die Ergebnisse sind nicht echt befriedigend.
Wenn das zu zentrierende Element (z.B. DIV-Container) eine feste breite hat ist das alles durchaus mit der Breitenangaben und minuszahlen machbar.
Beispiel:
position: absolute; /* Vielleicht nicht immer notwendig */
top: 50%;
left: 50%;
width: 500px; /* Inhalts Breite */
height: 400px; /* Inhalts Höhe */
margin-top: -200px; /* Höhe geteilt durch -2 */
margin-left: -250px; /* Breite geteilt durch -2 */

Dabei sind Minuszahlen in CSS wohl auch nicht das gelbe vom Ei.

Schwieriger wird es wenn ich alles innerhalb dieses Containers auch noch zentrieren möchte....

Es geht wohl darauf hinaus, daß man alle Absätze, alle Listen, alle Bilder und alles was da noch so drin sein kann separat und extra zentrieren muss.
Alles auf einem Schlag (wie <center>) geht wohl nicht, oder?

cu
Conny

[Ede]

Schwieriger wird es wenn ich alles innerhalb dieses Containers auch noch zentrieren möchte....

Es geht wohl darauf hinaus, daß man alle Absätze, alle Listen, alle Bilder und alles was da noch so drin sein kann separat und extra zentrieren muss.
Alles auf einem Schlag (wie <center>) geht wohl nicht, oder?

Lieber Conny,

eigentlich denke ich, dass du viel mehr Kenntnisse über HTML besitzt wie ich
Nun soll also der Zauberlehrling dem Zauberer sagen wie's geht?

Also ich würde halt einen CSS-Style anlegen:

QUELLTEXT

.zentriert {margin-left: auto; margin-right: auto;}

Dann halt jedem Blockelement innerhalb des Containers das "class="zentriert" mitgeben. Weitere Klassen kann man ja bequem kaskadieren.
Schon mal versucht innerhalb des Parent-Containers noch einen Container zu setzen, der den weiteren Inhalt mit "margin:auto" zentriert.

Ich hab's nun nicht ausprobiert, müßte aber im Sinne der Vererbung auf Child-Objekte ja gehen.

HTH

[Conny]

Hallo Ede,

nun, wer bessere Kenntnisse bezüglich HTML hat vermag ich nicht zu sagen.
Sicher, ich komme zurecht, aber für mich ist es immer noch Hobby, als Profi würde ich mich nicht einschätzen wollen.

Du schreibst:

Also ich würde halt einen CSS-Style anlegen:
.zentriert {margin-left: auto; margin-right: auto;}

Das reicht imho aber nicht! Der Begriff auto ist doch relativ zur Browsereinstellung, heisst, wenn auto oben und linksbündig ist, ist nix mit zentriert.
Da mussen schon weitere Angaben hinzu.
Wie gesagt, wenn die Elementen feste Breiten aufweisen geht es.
HIER habe ich eine kleine Testseite eingestellt.
Schwierigkeiten gibt es in diesem fall mit dem Bild.
Rein rechnerisch bekommt man das Bild in der mitte mit padding-left.
Die Breite des DIV-Containers minus Breite des Bildes geteilt durch 2, wäre die Padding-left Angabe.
Bei Mozilla und co stimmt das auch, durch die fehlerhafte intrepetierung von Padding beim IE steht das Bild aus der Mitte heraus zu weit nach rechts....
(IE rechnet die Padding-angaben des DIV Containers hinzu auf die des Bildes)
Also, keine befriedigende Lösung und wenn die Breitenangaben des Containers nicht wären, das Bild also direkt im BODY-Tag stehen würde, ging es so gar nicht!
Gebe ich das Bild lediglich margin-auto (also, Dein Vorschlag) mit, bleibt das Bild oben links im Bild.

Fazit: mir fehlt einfach sowas wie STYLE="position: center;"

cu
Conny

[db]

Hi Leute,

funktioniert <div align="center"> nicht mehr?

[i.b.g]

Hallo Conny,

wie wäre es denn damit:

QUELLTEXT

<BODY STYLE="background-color: #808080; margin:0px; text-align:center; margin:10%;">

<DIV STYLE="width: 600px;
           height: 400px;
           margin: auto;
           padding: 20px;
           background-color: #FFFF00;
           border: medium ridge #DF0000;">

<H1>&Uuml;berschrift</H1>

<IMG SRC="pics/bitburg-logo-kl.gif" WIDTH="154" HEIGHT="90"  ALT="">

<P>XXxx\_/xxXX</P>
</DIV>

Sollte sowohl im IE als auch im MM/FF ansehnlich sein.

Inspiration/Quelle: >> CSS4YOU <<

[Auge]

Hallo

Bei den CSS-Layoutbeispielen von SELFHTML gibt es in der Beschreibung eines zweispaltigen, gefloateten Layouts im letzten Abschnitt einen guten Tip. Man gebe für den <body> text-align:center; an (für den MSIE) und setze dies in den Angaben eines den ganzen Inhalt umschließenden <div>s auf text-align:left; zurück. Somit hat diese Angabe keine Wirkung auf den enthaltenen Text. Für das alles umschließende <div> gebe man zusätzlich margin:auto; für rechts und links an, um den standardkonformen Browsern das Zentrieren zu ermöglichen.

Das entspricht also, bis auf das Zurücksetzen der Textausrichtung, i.b.gs Vorschlag.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 12.08.2005 - 14:57

[db]

Wir sollten untescheiden

1. der body soll zentriert sein, kein Problem, auf meirn hp geht's ja auch

html,body{left:auto;right:auto;}

#globalcontainer{text-align:left;width:792px;margin:0 auto;}


2. Innerhalb eines DIV soll alles zentriert sein. ebenfalls kein Problem. DIV in DIV.
.infoot1{text-align:center;}

Eine gute Hilfe findet man unter:

http://www.thestyleworks.de/tut-art/centerblock.shtml

[Conny]

Hallo,
was Dieter schreibt, trifft die Lösung imho wohl am ehesten (DIV in DIV um alle Inhalte ebenfalls zu Zentrieren)

Im Grunde macht man damit genau das was der <center> Tag machen würde, alles was hiervon umschlossen ist, wird zentriert.

Ingo's Tipp, <Body center> und wenn nötig zurück deklarieren war mir auch geläufig und funktioniert auch ganz gut.
Sie baut aber auf die fehlerhafte intrepetierung des IE's auf, da ist der andere Lösungsvorschlag wohl die elegantere.
>>Test-2<<

cu
Conny

[Google Bot]