Ευθυγράμμιση κειμένου - CSS-Κόλπα

Anonim

Η text-alignιδιότητα στο CSS χρησιμοποιείται για την ευθυγράμμιση του εσωτερικού περιεχομένου ενός στοιχείου μπλοκ.

p ( text-align: center; )

Αυτές είναι οι παραδοσιακές τιμές για ευθυγράμμιση κειμένου:

  • left- Η προεπιλεγμένη τιμή. Το περιεχόμενο ευθυγραμμίζεται κατά μήκος της αριστεράς πλευράς.
  • right - Το περιεχόμενο ευθυγραμμίζεται κατά μήκος της δεξιάς πλευράς.
  • center- Περιεχόμενο κέντρα μεταξύ αριστερά και δεξιά άκρα. Το λευκό κενό στην αριστερή και τη δεξιά πλευρά κάθε γραμμής πρέπει να είναι ίσο.
  • justify - Τα κενά διαχωρίζονται έτσι ώστε όσο το δυνατόν περισσότερα μπλοκ σε μια γραμμή και η πρώτη λέξη σε αυτήν τη γραμμή είναι κατά μήκος της αριστεράς άκρης και η τελευταία λέξη είναι κατά μήκος της δεξιάς άκρης.
  • inherit - Η τιμή θα είναι ό, τι είναι το γονικό στοιχείο.

Το "Περιεχόμενο" χρησιμοποιείται εδώ ως όρος αντί για "κείμενο", επειδή ενώ η ευθυγράμμιση κειμένου επηρεάζει σίγουρα το κείμενο, επηρεάζει όλα τα ενσωματωμένα ή ενσωματωμένα στοιχεία μπλοκ σε αυτό το κοντέινερ.

Υπάρχουν επίσης δύο νέες τιμές στο CSS3, η αρχή και το τέλος. Αυτές οι τιμές διευκολύνουν την υποστήριξη πολλαπλών γλωσσών Για παράδειγμα, τα Αγγλικά είναι γλώσσα από αριστερά προς τα δεξιά (ltr) και τα Αραβικά είναι γλώσσα από τα δεξιά προς τα αριστερά (rtl). Η χρήση των «δεξιών» και «αριστερών» για τιμές είναι πολύ άκαμπτη και δεν προσαρμόζεται καθώς αλλάζει η κατεύθυνση. Αυτές οι νέες τιμές προσαρμόζονται:

  • start - Ίδιο με το "αριστερά" στο ltr, το ίδιο με το "δεξιά" στο rtl.
  • end - Ίδιο με το "δεξί" στο ltr, το ίδιο με το "αριστερό" στο rtl.

Υπάρχει επίσης match-parent, που μοιάζει με inherit, μόνο ότι η νέα τιμή υπολογίζεται έναντι της κατεύθυνσης του τρέχοντος στοιχείου αντί, ξέρετε, δεν το κάνετε αυτό.

Υπάρχουν μερικά πράγματα στην προδιαγραφή που δεν έχουν ακόμη υποστήριξη προγράμματος περιήγησης. Το ένα είναι η τιμή "start end" που θα ευθυγραμμίσει την πρώτη γραμμή σαν να ήταν "start" και τυχόν επόμενες γραμμές σαν να ήταν "end". Ένας άλλος δίνει στην τιμή μια συμβολοσειρά, όπως text-align: "." start;το κείμενο θα παραμείνει κατά την πρώτη εμφάνιση αυτού, όπως στην ευθυγράμμιση μιας στήλης αριθμών κατά μήκος ενός δεκαδικού σημείου.

Παραδείγματα

Αυτό το κείμενο είναι ευθυγραμμισμένο αριστερά.

Αυτό το κείμενο είναι σωστή στοίχιση.

Είμαι στο κέντρο!

Είμαι δικαιολογημένος. Γεμίζω ακριβώς το χώρο (εκτός από την τελευταία γραμμή), ακόμα κι αν πρέπει να τεντώσω λίγο κατά καιρούς.

Κληρονομώ την ευθυγράμμιση του γονέα μου. Σε αυτήν την περίπτωση, αυτό σημαίνει αριστερά.

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

Για αριστερά, δεξιά, κέντρο, αιτιολογήστε:

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Οποιος Οποιος Οποιος 3.5+ 3+ Οποιος Οποιος

Για τις τιμές startκαι end:

Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
Οποιος 3.1+ 3.6+ Κανένας Κανένας Οποιος Οποιος