HTML/CSS: figure, text-transform und vertikales Zentrieren

Im Folgenden eine paar HTML-Tags bzw. CSS-Optionen, die ich erst neu gefunden habe bzw. mir wieder ins Gedächtnis kamen.

[HTML] figure und figcaption

Die beiden Tags sind dazu gedacht, einer Tabelle bzw. einem Bild eine dazugehörige Unterschrift zu geben. Vorteil gegenüber einfachen divs ist die bessere semantische Hervorhebung.

Der Quellcode

1
2
3
4
<figure>
    <img src="tinypng-small.png"/>
    <figcaption>Als Beispiel der Panda von tinypng</figcaption>
</figure>

schaut gerendert zum Beispiel so aus:

Als Beispiel der Panda von tinypng

(Das Ganze ist noch ein wenig mit CSS umgestaltet.)

Aus der Reihe fällt bei der Unterstützung nur der IE8. Das sollte sich zunehmend aber von selbst erledigt haben, da es bekanntlich keinen Suppport für Windows XP mehr gibt. (Notfalls den einfachen Workaround von Mozilla verwenden)

weitere Informationen unter:

[CSS] text-transform

Folgendes Problem: In einem Menü möchte man nur Großbuchstaben verwenden. Freilich kann man das direkt im HTML-Quellcode umsetzen. Möchte man aber auf Nummer sicher gehen, weil es z.B. mit einem CMS umgesetzt wird, ist die Lösung über CSS schöner. Auf die entsprechenden Tags folgendes anwenden:

1
text-transform: uppercase;

Mehr Informationen zu text-transform auf:

[CSS] Eine Zeile Text vertikal zentrieren

Horizontal Text zu zentrieren ist einfach (vgl. text-align) – aber wie schaut es vertikal aus? Braucht man wie ich nur ein einziges Wort oder Zeile zu zentrieren, geht es am einfachsten, line-height auf den selben Wert wie die Höhe des umgebenden Tags zu setzen. Ein Beispiel:

CSS-Teil

1
2
3
4
5
6
7
8
div {
    background-color: orange;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 100%;
}

HTML-Teil

1
<div>Text</div>

Das ergibt:

Text

Handelt es sich dagegen um einen mehrere Zeilen langen Text finden sich mögliche Lösungen auf auf css-tricks: per table-cell oder noch allgemeiner gehalten per Pseudo-Element.

Kommentare

Noch kein Kommentar zu diesem Artikel.

Neuen Kommentar schreiben