.

Το χαρακτηριστικό align είναι αρκετά καθολικό και μπορεί να εφαρμοστεί όχι μόνο στο κύριο κείμενο, αλλά και σε επικεφαλίδες όπως

. Το Παράδειγμα 1 δείχνει πώς να ορίσετε την ευθυγράμμιση σε μια τέτοια περίπτωση.

Παράδειγμα 1: Στοίχιση κειμένου

Πώς να πιάσετε ένα λιοντάρι;

Μέθοδος ωμής δύναμης

Χωρίζουμε την έρημο σε μια σειρά από στοιχειώδεις περιοχές, το μέγεθος των οποίων συμπίπτει με συνολικές διαστάσειςλιοντάρι, αλλά ταυτόχρονα μικρότερο μέγεθοςκύτταρα. Στη συνέχεια, με απλή αναζήτηση προσδιορίζουμε την περιοχή στην οποία βρίσκεται το λιοντάρι, κάτι που οδηγεί αυτόματα στη σύλληψή του.

Μέθοδος διχοτομίας

Χωρίζουμε την έρημο στα δύο. Στο ένα μέρος υπάρχει ένα λιοντάρι, στο άλλο δεν υπάρχει κανένα. Παίρνουμε το μισό στο οποίο βρίσκεται το λιοντάρι και το χωρίζουμε ξανά στη μέση. Το επαναλαμβάνουμε μέχρι να πιαστεί το λιοντάρι.

Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.

Ρύζι. 1. Ευθυγραμμίστε το κείμενο δεξιά και αριστερά

ΣΕ σε αυτό το παράδειγμαΟ τίτλος στοιχίζεται στο κέντρο του παραθύρου του προγράμματος περιήγησης, η επισημασμένη παράγραφος στοιχίζεται προς τα δεξιά και το σώμα του κειμένου στοιχίζεται προς τα αριστερά.

Κάθε σχεδιαστής διάταξης αντιμετωπίζει συνεχώς την ανάγκη να ευθυγραμμίσει το περιεχόμενο σε ένα μπλοκ: οριζόντια ή κάθετα. Υπάρχουν αρκετά καλά άρθρα για αυτό το θέμα, αλλά όλα προσφέρουν πολλές ενδιαφέρουσες, αλλά λίγες πρακτικές επιλογές, γι' αυτό πρέπει να αφιερώσετε επιπλέον χρόνο για να επισημάνετε τα κύρια σημεία. Αποφάσισα να παρουσιάσω αυτές τις πληροφορίες σε μια φόρμα που με βολεύει, για να μην ψάχνω άλλο στο google.

Ευθυγράμμιση μπλοκ με γνωστά μεγέθη

Ο ευκολότερος τρόπος χρήσης CSS είναι να ευθυγραμμίσετε μπλοκ που έχουν γνωστό ύψος (για κάθετη στοίχιση) ή πλάτος (για οριζόντια στοίχιση).

Ευθυγράμμιση με χρήση επένδυσης

Μερικές φορές δεν μπορείτε να κεντράρετε ένα στοιχείο, αλλά να προσθέσετε περιθώρια σε αυτό χρησιμοποιώντας το " υλικό παραγεμίσματος".

Για παράδειγμα, υπάρχει μια εικόνα 200 επί 200 pixel και πρέπει να την κεντράρετε σε ένα μπλοκ 240 επί 300. Μπορούμε να ορίσουμε το ύψος και το πλάτος εξωτερική μονάδα= 200 εικονοστοιχεία και προσθέστε 20 εικονοστοιχεία πάνω και κάτω και 50 αριστερά και δεξιά.

.example-wrapper1 ( φόντο : #535E73 ; πλάτος : 200 εικονοστοιχεία , ύψος : 200 εικονοστοιχεία , επένδυση : 20 εικονοστοιχεία 50 εικονοστοιχεία ; )

Ευθυγράμμιση απόλυτα τοποθετημένων μπλοκ

Εάν το μπλοκ έχει οριστεί σε " θέση: απόλυτη", τότε μπορεί να τοποθετηθεί σε σχέση με τον πλησιέστερο γονέα του με "θέση: σχετική". Αυτό απαιτεί όλες τις ιδιότητες (" μπλουζα","σωστά","κάτω μέρος","αριστερά") εσωτερική μονάδαεκχωρήστε την ίδια τιμή καθώς και το "margin: auto".

*Υπάρχει μια απόχρωση: Το πλάτος (ύψος) του εσωτερικού μπλοκ + η τιμή του αριστερού (δεξιά, κάτω, πάνω) δεν πρέπει να υπερβαίνει τις διαστάσεις του γονικού μπλοκ. Πιο αξιόπιστο ακίνητα που απομένουν(δεξιά, κάτω, πάνω) εκχωρήστε 0 (μηδέν).

.example-wrapper2 (θέση: σχετική; ύψος: 250 εικονοστοιχεία; φόντο: url(space.jpg) ;) .cat-king (πλάτος: 200 εικονοστοιχεία; ύψος: 200 εικονοστοιχεία; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0 ; δεξιά : 0 ;

Οριζόντια ευθυγράμμιση

Στοίχιση με χρήση "text-align: center"

Για να ευθυγραμμίσετε το κείμενο σε ένα μπλοκ υπάρχει ειδική ιδιοκτησία "στοίχιση κειμένου". Όταν έχει οριστεί σε " κέντρο"Κάθε γραμμή κειμένου θα στοιχίζεται οριζόντια. Για κείμενο πολλών γραμμών, αυτή η λύση χρησιμοποιείται εξαιρετικά σπάνια· πιο συχνά αυτή η επιλογή μπορεί να βρεθεί για τη στοίχιση διαστημάτων, συνδέσμων ή εικόνων.

Κάποτε έπρεπε να φτιάξω κάποιο κείμενο για να δείξω πώς λειτουργεί η στοίχιση κειμένου πότε Βοήθεια CSS, αλλά τίποτα ενδιαφέρον δεν μου ήρθε στο μυαλό. Στην αρχή αποφάσισα να αντιγράψω μια παιδική ομοιοκαταληξία κάπου, αλλά θυμήθηκα ότι αυτό μπορεί να χαλάσει τη μοναδικότητα του άρθρου και οι αγαπητοί μας αναγνώστες δεν θα μπορούσαν να το βρουν στο Google. Και τότε αποφάσισα να γράψω αυτήν την παράγραφο - σε τελική ανάλυση, η ουσία δεν είναι μαζί της, αλλά η ουσία βρίσκεται σε ευθυγράμμιση.

.example-text (text-align : center ; padding : 10px ; background : #FF90B8 ; )

Αξίζει να σημειωθεί ότι αυτή η ιδιότητα θα λειτουργεί όχι μόνο για κείμενο, αλλά και για οποιοδήποτε ενσωματωμένα στοιχεία("εμφάνιση: ενσωματωμένη").

Αλλά αυτό το κείμενο είναι στοιχισμένο προς τα αριστερά, αλλά βρίσκεται σε ένα μπλοκ που βρίσκεται στο κέντρο σε σχέση με το περιτύλιγμα.

.example-wrapper3 (text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; πλάτος : 40% ; padding : 10 px ; text-align : left ; background : #FFE5E5 ; )

Ευθυγράμμιση μπλοκ με χρήση περιθωρίου

Τα στοιχεία μπλοκ με γνωστό πλάτος μπορούν εύκολα να ευθυγραμμιστούν οριζόντια, ρυθμίζοντάς τα σε "margin-left: auto; margin-right: auto". Συνήθως χρησιμοποιείται η συντομογραφία: " περιθώριο: 0 αυτόματο" (μπορεί να χρησιμοποιηθεί οποιαδήποτε τιμή αντί για μηδέν). Αλλά αυτή η μέθοδος δεν είναι κατάλληλη για κάθετη στοίχιση.

.lama-wrapper (ύψος: 200 εικονοστοιχεία; φόντο: #F1BF88;) .lama1 (ύψος: 200 εικονοστοιχεία; πλάτος: 200 εικονοστοιχεία; φόντο: url(lama.jpg) ; περιθώριο: 0 αυτόματο; )

Αυτός είναι ο τρόπος με τον οποίο θα πρέπει να ευθυγραμμίσετε όλα τα μπλοκ, όπου είναι δυνατόν (όπου έχει καθοριστεί ή απόλυτη τοποθέτηση) - είναι ο πιο λογικός και επαρκής. Αν και αυτό φαίνεται προφανές, έχω δει μερικές φορές τρομακτικά παραδείγματα με αρνητικές εσοχές, οπότε αποφάσισα να διευκρινίσω.

Κατακόρυφη στοίχιση

ΜΕ κατακόρυφη στοίχισηπολύ περισσότερα προβλήματα- προφανώς, αυτό δεν προβλεπόταν στο CSS. Υπάρχουν διάφοροι τρόποι για να πετύχετε το επιθυμητό αποτέλεσμα, αλλά δεν είναι όλοι πολύ όμορφοι.

Ευθυγράμμιση με την ιδιότητα line-height

Στην περίπτωση που υπάρχει μόνο μία γραμμή σε ένα μπλοκ, μπορείτε να επιτύχετε την κατακόρυφη ευθυγράμμισή του χρησιμοποιώντας το " ύψος γραμμής" και ρυθμίστε το στο επιθυμητό ύψος. Για αξιοπιστία, αξίζει να ρυθμίσετε και το "height", η τιμή του οποίου θα είναι ίση με την τιμή "line-height", επειδή το τελευταίο δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης.

.example-wrapper4 (ύψος γραμμής: 100 εικονοστοιχεία; χρώμα: #DC09C0; φόντο: #E5DAE1; ύψος: 100 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; )

Είναι επίσης δυνατό να επιτευχθεί ευθυγράμμιση μπλοκ με πολλές γραμμές. Για να το κάνετε αυτό, θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο μπλοκ περιτυλίγματος και να ορίσετε το ύψος της γραμμής σε αυτό. Ένα εσωτερικό μπλοκ μπορεί να είναι πολλαπλών γραμμών, αλλά πρέπει να είναι "ενσωματωμένο". Πρέπει να εφαρμόσετε το "vertical-align: middle" σε αυτό.

.example-wrapper5 (ύψος γραμμής: 160 εικονοστοιχεία; ύψος: 160 εικονοστοιχεία; μέγεθος γραμματοσειράς: 0; φόντο: #FF9B00; ) .example-wrapper5 .text1 (εμφάνιση: inline-block; μέγεθος γραμματοσειράς: 4 γραμμή: 1. 1.5 ;

Το μπλοκ περιτυλίγματος πρέπει να έχει οριστεί "μέγεθος γραμματοσειράς: 0". Εάν δεν έχει εγκατασταθεί μηδενικό μέγεθοςγραμματοσειρά, το πρόγραμμα περιήγησης θα προσθέσει μερικά επιπλέον pixel. Θα πρέπει επίσης να καθορίσετε το μέγεθος γραμματοσειράς και το ύψος γραμμής για το εσωτερικό μπλοκ, επειδή αυτές οι ιδιότητες κληρονομούνται από το γονικό.

Κάθετη στοίχιση σε πίνακες

ιδιοκτησία" κατακόρυφη ευθυγράμμιση" επηρεάζει επίσης τα κελιά του πίνακα. Γ καθορισμένη τιμή"μεσαία", το περιεχόμενο μέσα στο κελί είναι ευθυγραμμισμένο στο κέντρο. Φυσικά, η διάταξη πίνακα θεωρείται πλέον αρχαϊκή, αλλά σε εξαιρετικές περιπτώσεις μπορείτε να την προσομοιώσετε ορίζοντας " οθόνη: πίνακας-κελί".

Συνήθως χρησιμοποιώ αυτήν την επιλογή για κάθετη στοίχιση. Παρακάτω είναι ένα παράδειγμα διάταξης από ένα ολοκληρωμένο έργο. Είναι η εικόνα που είναι κεντραρισμένη κάθετα με αυτόν τον τρόπο που έχει ενδιαφέρον.

.one_product .img_wrapper ( οθόνη : πίνακας-κελί ; ύψος : 169 εικονοστοιχεία ; κατακόρυφη στοίχιση : μέση ; υπερχείλιση : κρυφό ; φόντο : #fff ; πλάτος : 255 εικονοστοιχεία ; ) .one_product img ( μέγ. ύψος : 169 εικονοστοιχεία πλάτος : μέγ. % ελάχ. πλάτος : 140 px : μπλοκ ;

Θα πρέπει να θυμόμαστε ότι εάν ένα στοιχείο έχει ένα σύνολο "float" εκτός του "κανένα", τότε σε κάθε περίπτωση θα είναι μπλοκ (εμφάνιση: μπλοκ) - τότε θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο περιτύλιγμα μπλοκ.

Ευθυγράμμιση με ένα πρόσθετο ενσωματωμένο στοιχείο

Και για ενσωματωμένα στοιχεία μπορείτε να χρησιμοποιήσετε " κατακόρυφη ευθυγράμμιση: μέση". Επιπλέον, όλα τα στοιχεία με " οθόνη: ενσωματωμένη" που βρίσκονται στην ίδια γραμμή θα ευθυγραμμιστούν με μια κοινή κεντρική γραμμή.

Πρέπει να δημιουργήσετε ένα βοηθητικό μπλοκ με ύψος ίσο ύψοςγονικό μπλοκ, τότε το επιθυμητό μπλοκ θα κεντραριστεί. Για να γίνει αυτό, είναι βολικό να χρησιμοποιήσετε τα ψευδοστοιχεία:πριν ή:μετά.

.example-wrapper6 (ύψος : 300 px ; στοίχιση κειμένου : κέντρο ; φόντο : #70DAF1 ; ) .pudge ( οθόνη : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; 200 px ; 200 px ;

Οθόνη: ευθυγράμμιση και ευθυγράμμιση

Αν δεν σε νοιάζει πολύ χρήστες Explorer 8 ή νοιάζονται τόσο πολύ που είστε έτοιμοι να τους εισάγετε ένα κομμάτι επιπλέον javascript, τότε μπορείτε να χρησιμοποιήσετε το "display: flex". Τα Flex boxes είναι εξαιρετικά στην αντιμετώπιση προβλημάτων ευθυγράμμισης και απλώς γράψτε "margin: auto" για να κεντράρετε το περιεχόμενο μέσα.

Μέχρι στιγμής, πρακτικά δεν έχω συναντήσει ποτέ αυτή τη μέθοδο, αλλά δεν υπάρχουν ειδικοί περιορισμοί για αυτήν.

.example-wrapper7 ( οθόνη : flex ; ύψος : 300 px ; φόντο : #AEB96A ; ) .example-wrapper7 img ( περιθώριο : auto ; )

Λοιπόν, μόνο για αυτό ήθελα να γράψω Ευθυγράμμιση CSS. Τώρα το κεντράρισμα περιεχομένου δεν θα είναι πρόβλημα!

Μέχρι τώρα, έχουμε στοιχίσει στοιχεία μόνο προς τα αριστερά. Πιο συγκεκριμένα, εσείς και εγώ δεν το κάναμε καθόλου και το ίδιο το πρόγραμμα περιήγησης ευθυγραμμίζει στοιχεία προς τα αριστερά από προεπιλογή. Φυσικά, θα ήταν πολύ βαρετό να ευθυγραμμίσουμε τα πάντα προς τα αριστερά. Επομένως υπάρχουν διάφορους τρόπουςευθυγράμμιση κέντρου και δεξιά.

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

Μια φορά κι έναν καιρό υπήρχε μια ετικέτα

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

Μπορείτε να προσθέσετε μια εικόνα, επίσης στοιχισμένη στο κέντρο, ας πάμε επίσης επόμενη γραμμήχρησιμοποιώντας ετικέτα
:

Επικεφαλίδα 1ου επιπέδου, στοίχιση στο κέντρο

Ήταν μια ετικέτα

, το οποίο είναι ήδη ξεπερασμένο, επιπλέον, σε αντίθεση με τις προσδοκίες σας για τις ετικέτες Και απλά δεν υπάρχει. Ας πούμε αριστερή στοίχιση από προεπιλογή, στοίχιση στο κέντρο με χρήση ετικέτας , αλλά τι γίνεται με το σωστό;

Για να λύσουν αυτό το πρόβλημα, οι προγραμματιστές σκέφτηκαν καθολική μέθοδοςευθυγράμμιση στοιχείων HTML. Η μέθοδος είναι η χρήση των λεγόμενων κοντέινερ, τα οποία δημιουργούνται χρησιμοποιώντας την ετικέτα

. Δηλαδή, ό,τι πρέπει να τοποθετηθεί σε ένα συγκεκριμένο δοχείο τοποθετείται μέσα στην ετικέτα

. Και αυτή η ετικέτα έχει ήδη το χαρακτηριστικό " ευθυγραμμίζω», η αξία του οποίου καθορίζει τη θέση αυτού του δοχείου. Υπάρχουν τρεις έννοιες: " αριστερά", "κέντρο", "σωστά". Από προεπιλογή, είναι " αριστερά«Ωστόσο, νομίζω ότι αυτό δεν σας εκπλήσσει.

Ας γράψουμε το ίδιο τώρα Κώδικας HTML, αλλά χρησιμοποιώντας δοχεία, επιπλέον, ας ευθυγραμμίσουμε όχι προς το κέντρο, αλλά προς τα δεξιά.

Όπως μπορείτε να δείτε, όλα λειτουργούν. Σας συμβουλεύω να αλλάξετε επίσης τις τιμές του χαρακτηριστικού " ευθυγραμμίζω" για να εξετάσετε άλλους τύπους ευθυγράμμισης περιεχομένου κοντέινερ.

Ένας άλλος τρόπος για να ευθυγραμμίσετε τα στοιχεία HTML- αυτοί είναι πίνακες, αλλά αυτό το θέμα αξίζει μια ξεχωριστή συζήτηση, επομένως θα μιλήσουμε για αυτό σε ένα από τα ακόλουθα άρθρα.

Προς το παρόν, η σελίδα σας θα πρέπει να μοιάζει με αυτό:

Επικεφαλίδα 1ου επιπέδου, στοίχιση στο κέντρο

Επικεφαλίδα 1ου επιπέδου, δεξιά στοίχιση

Με εκτίμηση, Μιχαήλ Ρουσάκοφ.

ΥΣΤΕΡΟΓΡΑΦΟ.Αν θέλετε να μάθετε περισσότερα για HTMLμετά κοίτα το δικό μου δωρεάν μάθημαμε ένα παράδειγμα δημιουργίας ιστότοπου στο HTML:

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

Βασικές λεπτότητες

Πρώτα απ 'όλα, πρέπει να σημειωθεί ότι αυτό γραφική μορφήΗ παρουσίαση δεδομένων σας επιτρέπει να δομήσετε πληροφορίες, γεγονός που διευκολύνει πολύ την αφομοίωσή τους. Σχεδόν οποιοδήποτε περιεχόμενο μπορεί να βρίσκεται μέσα στα κελιά του πίνακα: από κείμενο έως βίντεο. Είναι σημαντικό να λάβετε υπόψη όχι μόνο το μέγεθος, αλλά και τη θέση του.

Πώς να κεντράρετε το ίδιο το τραπέζι

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

...

Αυτό προκαλεί τον αυτόματο υπολογισμό της εσοχής του πίνακα. Μετά από αυτό, ο πίνακας θα βρίσκεται στο κέντρο της σελίδας.

Στοίχιση στο κέντρο στα κελιά

Εξίσου συχνά, πρέπει να ευθυγραμμίσετε τα δεδομένα στο κέντρο του κελιού. Υπάρχουν τρεις τρόποι για να γίνει αυτό: οριζόντια, κάθετη και απόλυτη. Από το όνομά τους φαίνεται ξεκάθαρα σε ποιον άξονα θα γίνει το κεντράρισμα. Σε κάθε περίπτωση, η ετικέτα χρησιμοποιείται , υπεύθυνο για ένα συγκεκριμένο κελί στη σειρά. Στη συνέχεια, πρέπει να αντιστοιχίσετε στα χαρακτηριστικά του valign (κάθετα) ή/και στοίχιση (οριζόντια) την τιμή "κέντρο", ανάλογα με την εργασία σας:

Κείμενο με κέντρο στο κελί

Εάν θέλετε να κάνετε αυτή τη μορφοποίηση πρότυπο για ολόκληρο τον ιστότοπο ή τη σελίδα (για να μην ξαναγράψετε κάθε πίνακα), τότε θα πρέπει να χρησιμοποιήσετε στυλ CSS. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα μέσα στην ετικέτα :

Χρησιμοποιώντας αυτήν τη μέθοδο, μπορείτε επίσης να ορίσετε τη στοίχιση για ένα συγκεκριμένο κελί, μια στήλη, μια γραμμή ή ολόκληρο τον πίνακα ως σύνολο. Όπως μπορείτε να δείτε, οποιαδήποτε από τις μεθόδους είναι πολύ απλή.