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:
auf YouTube
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?
Hat dir der Beitrag gefallen? Folge uns auf WhatsApp und Google News und verpasse keine Neuigkeit rund um Technik, Games und Entertainment.
