Mit HTML/CSS zentrieren - Wie mache ich es?

Also ich wusste jetzt leider nicht, wie ich meine Überschrift formulieren sollte. Auf jeden Fall möchte ich einen Bereich meiner Website zentrieren. Der Bereich soll schon direkt anfangen und nicht irgendwie in der Mitte des Browsers. Ihr könnt euch auch direkt die Website von Talkteria anschauen.

Hier sieht man es sehr gut. Der braune Abschnitt ist direkt oben und beginnt nicht mit der grauen Farbe drumherum. Dies möchte ich nun eben auch machen, weiß allerdings nicht, was für ein Code dafür verwendet werden muss. Kann mir da jemand helfen?

Generell gilt - <center> vor das Element, das zentriert werden soll und </center> dahinter, direkt im HTML Code. Und wenn ein Element ganz oben beginnen sollen müssen alle <br> vor dem Element raus.

Im CSS Code ist das ein kleines bisschen komplizierter und um dir dabei zu helfen müsste ich wissen um was für ein Element es sich handelt, das du zentrieren willst. Handelt es sich dabei um einen Text, ein Bild oder um eine Tabelle? Setze doch einfach mal den Link zu der Webseite hier rein und wenn du eine externe CSS Datei verlinkt hast auf deiner Webseite wäre ein Link zu dieser Datei natürlich auch gut, das erspart das Suchen im Quelltext.

Also den Tag <center></center> sollte man heute nicht mehr nutzen. Wie schon erwähnt ist hier CSS die richtige Lösung. Bei dem Element was du zentrieren willst, gibts du einfach die CSS-Eigenschaft "vertical-align: middle;". Evtl. musst du noch ein wenig mit "margin" und "padding" arbeiten, damit oben kein Spalt entsteht. "Margin" ist der Aussenabstand des Elements und "padding" der Innenabstand". Ein Beispiel wäre du setzt um die ganze Seite ein <div></div> und gibts diesem die Attribute.

Damit nach oben kein Abstand entsteht, solltest du margin und padding erstmal auf null setzen. Sofern du nach unten Abstände möchtest, kannst du diese später noch separat angeben. Aber durch das auf null Setzen kommst du näher an ein Endergebnis, dass in allen Browsern gleich aussieht, denn unterschiedliche Browser haben zum Teil unterschiedliche Standardwerte (die Standardwerte wählen die Browser aber nur dann, wenn von der Webseite keine eigenen Werte kommen).

Wie McMazzaker schon erwähnt hat kannst du "center" im HTML vergessen, Semantik (im HTML) wird dank CSS vom Layout getrennt. Das ist doch der springende Punkt, warum man überhaupt CSS nutzt und keine Tabellen-Layouts mehr baut!

Je nachdem, ob du ein Inline- oder ein Blockelement in die Mitte setzen willst, hilft dir dabei entweder "vertical-align: middle;" oder aber "text-align: center;". Text-align bezieht sich nicht automatisch auf Text, sondern auf alle Arten von Blockelementen (auch Divs sind Blockelemente, sofern sie nicht durch extra Eigenschaften in Inlineelemente gewandelt werden).

Solltest du dich komplett am Beispiel Talkteria halten wollen und die ganze Webseite zentrieren (und nicht nur ein Element), wäre ein alles umgebender Div-Container ("Wrapper") nicht nur ein Beispiel, sondern die beste Lösung Hier gibt es noch einen "besonderen Trick" (naja, so besonders eigentlich auch nicht): "margin: 0 auto;" definiert die Außenabstände. Bei zwei Werten interpretiert der Browser den ersten für oben und unten und den zweiten für links und rechts. Wenn die Seiten also auf "auto"(matisch) gesetzt sind, sind immer die Abstände zu beiden Seiten gleich - und das sorgt somit für eine Zentrierung, egal welche Monitorauflösung der Betrachter hat und egal ob er das Fenster aktiv größer und kleiner macht. Der Inhalt bleibt immer in der Mitte. Natürlich musst du dazu noch beachten, dass du tiefer liegende Elemente nicht "fixed" oder "absolute" positionierst, sofern sie sich ebenfalls bewegen (können) sollen.