Λεζάντα - CSS-Κόλπα

Anonim

Η caption-sideιδιότητα στο CSS σας επιτρέπει να ορίσετε πού να τοποθετήσετε HTML

στοιχείο, που χρησιμοποιείται σε πίνακες HTML. Αυτή η ιδιότητα μπορεί επίσης να εφαρμοστεί σε οποιοδήποτε στοιχείο του οποίου displayέχει οριστεί η ιδιότητα caption-side.

table ( caption-side: top; )

Αξίες

  • top: η προεπιλεγμένη. Τοποθετεί τη λεζάντα στο πάνω μέρος του πίνακα.
  • bottom: τοποθετεί τη λεζάντα στο κάτω μέρος του πίνακα.
  • inherit: δηλώνει ότι η τιμή κληρονομείται από την caption-sideτιμή του γονέα της

Το caption-sideακίνητο μπορεί να εφαρμοστεί είτε στο


element or the

display table-caption text-align

Σημειώστε ότι οι παραπάνω τιμές caption-sideείναι σχετικές με τη λειτουργία γραφής του πίνακα. Για παράδειγμα, εάν ένας πίνακας έχει ρυθμιστεί σε κατακόρυφη λειτουργία γραφής, τότε οι τιμές topκαι οι bottomτιμές θα είναι σχετικές με την κατεύθυνση του πίνακα.

Η παρακάτω επίδειξη περιλαμβάνει ένα κουμπί "εναλλαγής" που εναλλάσσει την caption-sideιδιότητα του πίνακα μεταξύ topκαι bottom, ώστε να μπορείτε να δείτε τη διαφορά χρησιμοποιώντας έναν πίνακα με πολλές σειρές δεδομένων:

Δείτε το Pen
Demo της ιδιότητας υπότιτλων από CSS-Tricks (@ css-tricks)
στο CodePen.

Στην επόμενη επίδειξη, το writing-modeγια το τραπέζι έχει οριστεί σε vertical-rl. Όπως αποδεικνύεται με εναλλαγή χρησιμοποιώντας το κουμπί, οι τιμές topκαι οι bottomτιμές είναι σχετικές με τη λειτουργία γραφής του πίνακα:

Δείτε το Pen
Demo της ιδιότητας υπότιτλων με διαφορετική λειτουργία γραφής από CSS-Tricks (@ css-tricks)
στο CodePen.

Μη τυπικές τιμές μόνο για Firefox

Ο Firefox υποστηρίζει από καιρό και εξακολουθεί να υποστηρίζει τέσσερις μη τυπικές τιμές για caption-side:

  • left: τοποθετεί τη λεζάντα στα αριστερά του πίνακα.
  • right: τοποθετεί τη λεζάντα στα δεξιά του πίνακα.
  • top-outside: τοποθετεί τη λεζάντα στο πάνω μέρος του πίνακα, με τις διαστάσεις του ανεξάρτητες από τον πίνακα
  • bottom-outside: τοποθετεί τον υπότιτλο στο κάτω μέρος του πίνακα, με τις διαστάσεις του ανεξάρτητες από τον πίνακα

Η παρακάτω επίδειξη λειτουργεί μόνο στον Firefox και σας επιτρέπει να χρησιμοποιήσετε τέσσερα κουμπιά για να ορίσετε τις διαφορετικές μη τυπικές τιμές:

Δείτε την
επίδειξη μόνο του Pen Firefox της ιδιότητας υπότιτλων από CSS-Tricks (@ css-tricks)
στο CodePen.

Νέες τυπικές τιμές

Στα τελευταία σχέδια των προδιαγραφών CSS, το caption-sideακίνητο είναι μέρος του CSS Λογική Ιδιότητες επιπέδου 1 και περιλαμβάνει το αξιών block-start, block-end, inline-start, και inline-end. Οι δύο τελευταίες αντιστοιχούν στις μη τυπικές leftκαι τις rightτιμές και απαιτούνται μόνο για υποστήριξη από πράκτορες χρηστών που υποστηρίζουν αυτές τις μη τυπικές τιμές.

Περισσότερες πληροφορίες

  • ιδιότητα υπότιτλου σε προδιαγραφές CSS2.1
  • ιδιότητα υπότιτλων σε προδιαγραφές CSS2.2
  • υπότιτλος στις λογικές ιδιότητες CSS 1

Υποστήριξη προγράμματος περιήγησης

στοιχείο, με το ίδιο αποτέλεσμα. Ενώ αυτή η ιδιότητα θα επηρεάσει τη θέση του πλαισίου υπότιτλων ως σύνολο (η τιμή του υπότιτλου υπολογίζεται), δεν θα επηρεάσει την ευθυγράμμιση του κειμένου μέσα στο πλαίσιο. Το κείμενο μέσα στο πλαίσιο μπορεί να ευθυγραμμιστεί χρησιμοποιώντας την ιδιότητα.
Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
1+ 1+ 1+ 9.2+ 8+ 2.1+ 3.2+

Η υποστήριξη στον παραπάνω πίνακα αναφέρεται στη βασική υποστήριξη για το πρότυπο topκαι τις bottomτιμές. Firefox υποστηρίζει επίσης επιπλέον η μη-πρότυπο left, right, top-outside, και bottom-outsideαξίες. Δεν υπάρχει υποστήριξη του προγράμματος περιήγησης για τα νέα block-start, block-end, inline-startκαι inline-endαξίες.