Sprachen lassen sich nicht über Nacht lernen. So auch Programmiersprachen wie CSS. Wie ihr euren Text in CSS vertikal ausrichtet, zeigen wir euch hier auf GIGA.

Mit CSS, auch Cascading Style Sheets lassen sich Elemente auf einer Website individuell gestalten. Neben der Farbe oder der Typografie ist es euch möglich, das Layout anzupassen. Hierfür könnt ihr Texte und Elemente ausrichten. Neben einer horizontalen Zentrierung lassen sie sich auch vertikal zentrieren. Wir erklären euch, wie ihr dabei vorgehen müsst, um verschiedene Elemente mit CSS vertikal auszurichten.

CSS gehört zu den beliebtesten Programmiersprachen des Internets. Kennt ihr bereits diese Fakten über das World Wide Web?


CSS wird im HTML Dokument in dem -Tag angesprochen und wird als „< style >“ eingeleitet und muss entsprechend dieser Skriptsprache auch wieder mit einem Tag beendet werden. Mit type="text/css" im Einleitungs-Tag erkennt der Browser, dass ihr CSS ansprecht und führt dieses schließlich aus.

Es gibt zum vertikalen Zentrieren zwei Befehle, diese lauten: text-align und vertical-align.

  • "Text-Align" steuert ausschließlich Inlineinhalte in Blockelemente, nicht die Blockelemente selbst.
    Hierfür gibt es die Einstellungswerte: start, end, left, right, center, justify, match-parent, inherit, initial und unset. 
  • "Vertical-Align" verändert Inline- oder Tabellenzellenelemente, Blockelemente werden nicht erfasst.
    Ihr könnt folgende Werte einstellen: baseline, sub, super, text-top, text-bottom, middle, top, bottom, "Prozentzahl", "Länge" und inherit.

Zu den Blockelementen zählen beispielsweise: < div >, < header >, < h1, h2, ....>, < p >, < table >, < u1 >, < o1 >, < footer >, < adress >

CSS: Texte vertikal zentrieren

Wollt ihr euren geschriebenen Text vertikal ausrichten, so könnt ihr den Befehl „text-align“ nutzen:

##          p { text-align : center }          ##
##          h 2 { text-align : center }       ##

CSS: Bilder vertikal zentrieren

Eure Bilder könnt ihr vertikal ausrichten, dabei behandelt ihr diese wie ein Blockelement:

##           < style > img {vertical-align: text-top;} < /style >                                ##
##          < p > < img src="" … > Ein Bild mit vertical-align< /p >                     ##

Neben CSS und HTML ist JavaScript eine weitere beliebte Programmiersprache. Wie ihr diese auf eurem PC aktiviert, zeigen wir euch hier:

CSS: Tabellen vertikal ausrichten

Der folgende Befehlt „vertical-align“ zentriert euere Tabelle vertikal aus:

##          td { vertical-align: top; }                ##

CSS: Text und Bilder in Blockelementen vertikal zentrieren

Die Kombination aus den Befehlen „display:table-cell“ und „vertical-align“ lässt eure Texte oder Bilder in Blockelementen vertikal zentriert aussehen:

##                < div style ="display:table-cell; vertical-align:middle">   < /div >                ##

Seid ihr sicher im Internet unterwegs?

Du willst keine News rund um Technik, Games und Popkultur mehr verpassen? Keine aktuellen Tests und Guides? Dann folge uns auf Facebook (GIGA Tech, GIGA Games) oder Twitter (GIGA Tech, GIGA Games).