ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

Element mit CSS horizontal und vertikal zentrieren

zentriert

HTML Texte oder Elemente mit CSS horizontal und vertikal zentrieren.
Untenstehend sind hierfür 2 Möglichkeiten aufgelistet.

Achtung
Diese Methoden für das vertikale und horizontale Zentrieren funktionieren nur, wenn nur ein direktes Kind-Element dem Eltern-Element unterstellt ist.
Es darf keine weiteren Geschwister-Elemente enthalten.

display: flex

Der grosse Vorteil beim "display: flex"-Modell liegt darin, dass hier nur dem Eltern-Element die Anweisung mitgegeben werden muss.

vertikal und horizontal zentrierte Text

HTML Code
<div class="eltern-element">
  <div class="kind-element">
    vertikal und horizontal zentrierte Text
  </div>
</div>

CSS Code
.eltern-element {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  height: 150px; /* Beispiel Höhe*/
  background-color:#CCC; /* Beispiel Hintergrundfarbe*/
}

.kind-element {
}


Vorsicht
Das "display: flex"-Modell wird von älteren Browsern nicht unterstützt.


Mehrere Elemente nebeneinander zentrieren

Selbstverständlich können auch mehrere Elemente nebeneinander zentriert werden.
Dies eignet sich auch für den Aufbau und das Grundgerüst von modernen responsive Website.

Text
Text
Text

HTML Code
<div class="eltern-element">
  <div class="kind-element" style="background-color: orange;">Text</div>
  <div class="kind-element" style="background-color: green;"> Text</div>
  <div class="kind-element" style="background-color: red;"> Text</div>
</div>

CSS Code
.eltern-element {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  justify-content: center; /* Horizontale Zentrierung */
  height: 150px; /* Beispiel Höhe*/
  background-color:#CCC; /* Beispiel Hintergrundfarbe*/
}

.kind-element {
margin: 10px; /* Zwischenabstand */
}


display: table

Der Vorteil beim "display: table"-Modell liegt beim guten Support von älteren Browsern.
Als kleiner Nachteil muss die Eigenschaft dem Eltern- und dem Kind-Element mitgegeben werden.
Dieses Modell ist nicht mit den alt bekannten und meist gehassten Tabellen zu verwechseln.

vertikal und horizontal zentrierte Text

HTML Code
<div class="eltern-element">
  <div class="kind-element">
    vertikal und horizontal zentrierte Text
  </div>
</div>

CSS Code
.eltern-element {
display: table;
width: 100%; /* bei Block-Element */
height: 150px; /* Beispiel Höhe*/
background-color:#CCC; /* Beispiel Hintergrundfarbe*/
}

.kind-element {
display: table-cell;
vertical-align: middle;
text-align: center;
}



Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen