Div-Tag zentrieren

Das Zentrieren eines <div>-Tags kann schon mal für Frust sorgen, wenn unverständlicher Weise das alte center-Tag oder text-align-Attribute kein Wirkung zeigen. Dieser Artikel zeigt, wie man dennoch ein div-Tag zentriert bekommt.

Can’t center <div>

Die Stichworte

  • “Can’t center div”
  • “div zenztrieren”
  • “Centering div within div”
  • “div only left align”
  • “div lässt sich nur links ausrichten”
  • “div innerhalb div zentrieren”
  • “text-align: center doesn’t wort”
  • “text-align center nur linksbündig” oder
  • “div mittig ausrichten”

gibt man schnell voller Frust bei Google ein, wenn man wieder mal mit seinem HTML– und CSS-Latein am Ende ist.

HTML-Code mit div-Elementen

Ausgangsituation ist meistens der folgende HTML-Code mit verschachtelten div-Tags. Zielstellung ist es, dass der Text oder die Elemente innerhalb der div-Elemente mit der ID Child im Browser mittig ausgerichtet werden.

<div class="my_div_wrapper">
<div class="my_row">
<div class="my_column">
<div class="my_content" id="content1">Text 1</div>
<div class="my_content" id="content2">Text 2</div>
</div>
<div class="my_column">
<div class="my_content" id="content3">Text 3</div>
<div class="my_content" id="content4">Text 4</div>
</div>
</div>
</div>

CSS-Code für div-Elemente

Die zugehörigen CSS-Klassen sehen dann so ähnlich wie folgdener Code aus. Diese CSS-Klassen stellen die vier Texte als zwei Zeilen und zwei Spalten dar, die sich responsiv verhalten. Um den Text zentriert auszurichten, ist man geneigt, dass CSS-Attribute “text-align: center;” zu verwenden.

<style type="text/css">
.my_div_wrapper{
display: flex;
text-align: center;
}
.my_row:after {
display: table;
text-align: center;
}
.my_column {
float: left;
}
</style>

Man kann es selbst ausprobieren und wird feststellen, dass der Text immer linksbündig dargestellt wird. Selbst wenn man um den obersten parent-div ein gute altes abgehangenen <center>-Tag setzt, bleibt dies ohne Wirkung. Echt ärgerlich!

CSS-Code für die zentrierte Ausrichtung

Das Problem hierbei ist die Verwendung des Attributs display mit seinen verschieden values, wie flex, inline, box etc. Diese verwendet man für möglichst flexible Darstellungen im responsiven Design. Bei Flex-Elementen wird aber von dem Browsern beim Rendern die Eigenschaft text-align ignoriert. Die Ausrichtung erfolgt hier über das Attribut “justify-content: center;”. Die Flex-Elemente werden dadurch mittig in der Zeile ausgerichtet.

Des richtige bzw. korrigierte CSS-Code sieht dann wie folgt aus:

<style type="text/css">
.my_div_wrapper{
display: flex;
justify-content: center;
}

.my_row:after {
display: table;
}
.my_column {
float: left;
}
</style>

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert