Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Vor einiger Zeit wurde ich gefragt ob es möglich ist, gefloatete Elemente zu zentrieren. Es ist möglich, und die Lösung ist im Grunde genommen auch völlig logisch. Man kommt nur leider nicht so einfach darauf.
Mit diesem Beitrag möchte ich daher zwei elementare Fragen im Umgang mit CSS beantworten. Wie zentriere ich gefloatete und wie absolut positionierte Elemente?

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Absolut positionierte Elemente zentrieren

Wenn ihr ein absolut positioniertes Seitenelement zentrieren wollt, muss zunächst die Breite des Elements fest definiert werden. In unserem Beispiel hat der div-Container eine Breite von 300px.
Mit left:50%; wird die linke Kante des Containers auf 50% des Browserfensters verschoben. Wir wollen aber den Mittelpunkt des Containers bei 50% sehen. Daher verschieben wir das Element anschließend mit margin-left:-150px um die Hälfte seiner Breite wieder nach links. Das wars auch schon.
Wenn ihr wie im folgenden Beispiel zusätzlich ein padding verwendet, erhöht sich die Gesamtbreite. Folglich muss der Container etwas weiter nach links verschoben werden. Im Beispiel verwende ich ein padding von 20px auf allen Seiten. Das Element muss daher um 170 Pixel nach links verschoben werden.

<div id="centered">Inhalt</div>
#centered {
  border:1px solid silver;
  padding:20px;
  position:absolute;
  width:300px;
  top:20px;
  left:50%;
  margin-left: -170px; /* Breite des Elemtens + Padding */
}

Beispiel anschauen

Gefloatete Elemente zentrieren

Wenn ihr ein gefloatetes Element zentrieren wollt, müsst ihr zusätzlich ein Hilfs-Element erstellen das als Container dient. Dieses Element erhält ein left:50% und wird mit der linken Kante an der Bildschirmmitte ausgerichtet.

Skizze der positionierten Container

Das enthaltene Element wird nun mit left:-50% um die Hälfte seiner variablen Breite aus diesem Container nach links verschoben.

<div id="container">
  <div id="centered"></div>
</div>
#container {
  float: left;
  position: relative;
  left: 50%;
}

#centered {
  float: left;
  position: relative;
  left: -50%;
  border:1px solid silver;
  padding:20px;
}

Beispiel anschauen

Ihr könnt die Beispieldateien beider Varianten hier herunterladen.

Download Beispieldateien

Links / Quellen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Elise
    schrieb am 12.08.2013 um 15:08 Uhr:

    Vielen Dank! Ich bin Anfängerin und habe mich dumm und dusselig gesucht! Das hier war DIE Lösung zu meinem Problem! Noch dazu super verständlich :-)

    Antworten
  2. Patrick
    schrieb am 12.12.2011 um 12:12 Uhr:

    @Dirk

    Anwendungsbeispiel siehe: http://das.chaoszwonull.de

    Eben Praktisch für kleine Teaserseiten, Vorschaltseiten, Baustellenhinweise^^, „Visitenkarten“ (also Websites die lediglich zwei, drei Infos über jemanden beherbergen sollen)… Oder auch Layer, die per Klick innerhalb einer Seite auftauchen können so funktionieren. Gibt scho einige Punkte, wo man das durchaus gebrauchen kann.

    Antworten
  3. Dirk
    schrieb am 12.12.2011 um 12:29 Uhr:

    @Jonas … mein Vorschlag wäre statt der Eigenschaft float auf display:table zu wechseln. Diese Elemente fallen wie Floats auf ohne explizite Breitenangabe auf die kleinstmögliche Breite zusammen und lassen sich per margin:0 auto; zentrieren. Sobald IE6 und 7 nicht mit an Bord sein müssen, ist das eine echte Alternative.

    Antworten
  4. Dirk
    schrieb am 12.12.2011 um 11:38 Uhr:

    Schön erklärt, nur haben doch Floats nunmal die Eigenart, sich am linken oder rechten Rand zu orientieren. Warum sollte man dieses Verhalten (außerhalb simulierter Spaltenlayouts) so verbiegen? Gibt es dafür einen praktischen Anwendungsfall dafür?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 12.12.2011 um 11:42 Uhr:

      @Dirk: Ich brauche die Funktion häufig um z.B. eine dynamisch gefüllte, in der Breite variable Pagination zu erstellen, die sich zentriert unter Beiträgen befindet. Absolut positionierte Elemente werden ja aus dem Dokument-Fluss entfernt und können daher leicht Ärger machen. Aber das ist natürlich immer die Frage wie das Dokument insgesamt strukturiert ist.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →