Mittels CSS Elemente wie DIV zentrieren

Konstantin | 15.09.2013

Text lässt sich in CSS sehr einfach mit text-align:center; positionieren. Um jedoch komplette Elemente zu positionieren bedienen sich viele spezieller JavaScripts. Da sich DIVs auch spielend leicht mit CSS zentrieren lassen wollen wir in diesem Artikel ein kleines Beispiel zeigen, sodass auch hier auf JavaScript verzichtet werden kann.

Dabei ist die Realisierung sehr einfach: Die alten Internet Explorer zentrieren mit text-align:center; sogar Elemente wie DIVs und für alle anderen Browser (auch die neueren IEs) kann man mit der Angabe von margin den Außenabstand auf auto setzen (links und rechts) um die Elemente zu zentrieren. Nachfolgend schauen wir uns das ganze mal in einem Beispiel an.

Der HTML-Code

Der Code in HTML ist sehr einfach. Wir brauchen das Element was wir zentrieren wollen, sowie für die alten Internet Explorer ein äußeres Element um den DIV, in unserem Beispiel reicht dazu sogar der Body-Tag.

HTML

<body>
  <div id="wrapper">
    Hier folgt unser zentrierter Inhalt.
  </div>
</body>

Unser CSS dazu

In CSS geben wir wie bereits erwähnt 2 Eigenschaften an um alle Browser abzudecken: text-align und margin.

CSS

body {
  text-align: center;
}

#wrapper {
  text-align: left;
  margin: 0 auto;
}

Statt dem margin: 0 auto; kann man auch nur links und rechts angeben mit: margin-left: auto; margin-right: auto; .
Im inneren DIV müssen wir dann noch die Schrift wieder auf linksbündig setzen (text-align: left;) damit wir den eigentlich Text im Div nicht zentrieren.

Hier folgt unser zentrierter Inhalt.
Bitte melden Sie sich an, um einen Kommentar zu schreiben.
Loading ...