In HTML hatte man valign verwendet, um einen Text in der dargestellten Höhe manipulieren zu können. Das war zum Beispiel notwendig geworden, wenn in einem Formular die Beschriftung neben der Checkbox angebracht wurde, die aber meistens tiefer gestanden ist als das Kästchen, das die Besucherinnen und Besucher anklicken sollten.
Mit valign konnte man den Text höher ansetzen, doch ist der Nachteil dieser Technik, dass man jede Textpassage so ausstatten musste. Viel eleganter und praktischer ergo zeitsparender kann die Formatierung mit dem CSS-Befehl vertical-align erfolgen. Auch damit kann man die Höhe und damit die Darstellung des Textes verändern.
ergibt:
Beispieltext mit vertical-align:text-top als Einstellung.
Beispieltext mit vertical-align:text-bottom als Einstellung.
Beispieltext mit vertical-align:25% als Einstellung.
Beispieltext mit vertical-align:10px als Einstellung.
Beispieltext mit vertical-align:top als Einstellung.
Beispieltext mit vertical-align:bottom als Einstellung.
Beispieltext mit vertical-align:baseline als Einstellung.
Beispieltext mit vertical-align:middle als Einstellung.
Beispieltext mit vertical-align:sub als Einstellung.
Beispieltext mit vertical-align:super als Einstellung.
Im Ganzen gibt es zehn verschiedene Möglichkeiten, um den Text in seiner vertikalen Höhe via CSS zu manipulieren. Manche Möglichkeiten sind haben Ähnlichkeiten mit HTML-Tags wie zum Beispiel sub und super, denn des gibt den sub-Tag und den sup-Tag in HTML, aber im Gegensatz zu den Tags wird in CSS nicht die Schrift verkleinert. Dass man dies mit CSS zusätzlich einstellen könnte, versteht sich von selbst.
Und das ist mit ein Vorteil dieser Technik, weil man die volle Kontrolle hat, wie der Text im Absatz aussehen soll. Natürlich kann man nicht nur einen Teil des Textes so gestalten, es besteht auch die Möglichkeit, dem p-Tag, also dem Absatz, eine solche Einstellung zuzuweisen. Das kann im Rahmen einer Tabelle interessant sein, denn dort sind Tabelleninhalte oft verschieden lang und damit auch hoch.
Interessant ist weiters, dass CSS die Möglichkeit anbietet, mit Prozentwerten oder Pixelwerten zu arbeiten. Man ist also nicht auf fixe Vorgaben angewiesen, sondern ganz frei und individuell agieren.
Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.
Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.
Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.
Themenseiten
Artikel-Thema: Mit CSS und vertical-align für vertikale Ausrichtung sorgen
Beschreibung: Mit 👍 vertical-align und CSS kann man die ✅ Ausrichtung des Textes verändern und damit einen Text oder Textauszug auch höher oder tiefer setzen.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel