Στο CSS, μερικά φαινομενικά απλά πράγματα δεν είναι τόσο εύκολο να γίνουν. Ένα από αυτά τα πράγματα είναι η ευθυγράμμιση, δηλ. όταν ένα στοιχείο πρέπει να τοποθετηθεί με συγκεκριμένο τρόπο σε σχέση με ένα άλλο.

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

Σημείωση: Κάτω από κάθε λύση υπάρχει μια λίστα με προγράμματα περιήγησης που υποδεικνύουν τις εκδόσεις στις οποίες λειτουργεί ο καθορισμένος κώδικας CSS.

CSS - Στοίχιση στο κέντρο

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

... ...

Γονέας ( θέση: σχετική; ) .child ( θέση: απόλυτη; αριστερά: 50%; επάνω: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transformation: translate(-50%, -50%) ;)

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10,5+
• Safari 3.1+

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

Γονέας ( θέση: σχετική; ) .παιδί ( θέση: απόλυτη; αριστερά: 50%; επάνω: 50%; /* πλάτος και ύψος 2 μπλοκ */ πλάτος: 500 εικονοστοιχεία; ύψος: 250 εικονοστοιχεία; /* Οι τιμές καθορίζονται ανάλογα στο μέγεθός του */ /* margin-left = - πλάτος / 2 */ margin-left: -250 px; /* margin-top = - height / 2 */ margin-top: -125px; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

Γονέας ( θέση: συγγενής; ) .παιδί (θέση: απόλυτη; /* πλάτος και ύψος 2 μπλοκ σε % */ ύψος: 50%; πλάτος: 50%; /* Οι τιμές καθορίζονται ανάλογα με το μέγεθός του σε % * / αριστερά: 25%; /* (100% - πλάτος) / 2 */ επάνω: 25%; /* (100% - ύψος) / 2 */ )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

1. Ευθυγράμμιση ενός στοιχείου μπλοκ (οθόνη: μπλοκ) σε σχέση με ένα άλλο (στο οποίο βρίσκεται) οριζόντια:

... ...

Αποκλεισμός (περιθώριο-αριστερά: αυτόματο; περιθώριο-δεξιά: αυτόματο; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

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

... ...

Γονέας (στοίχιση κειμένου: κέντρο; ) .child ( οθόνη: inline-block; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Κάθετη στοίχιση

1. Κεντράρετε ένα στοιχείο (οθόνη: inline, οθόνη: inline-block) σε σχέση με το άλλο (στο οποίο βρίσκεται) στο κέντρο. Το γονικό μπλοκ σε αυτό το παράδειγμα έχει ένα σταθερό ύψος, το οποίο ορίζεται χρησιμοποιώντας την ιδιότητα CSS line-height.

... ...

Γονικός (ύψος γραμμής: 500 εικονοστοιχεία; ) .child ( οθόνη: inline-block; κατακόρυφη στοίχιση: μέση; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Κεντράροντας ένα μπλοκ σε σχέση με ένα άλλο κατακόρυφα αντιπροσωπεύοντας τον γονέα ως πίνακα και το παιδί ως κελί αυτού του πίνακα.

Γονέας ( εμφάνιση: πίνακας; ) .child ( εμφάνιση: πίνακας-κελί, κατακόρυφη στοίχιση: μέση; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7,5+
• Safari 1.0+

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

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

Περιθώριο οριζόντιας ευθυγράμμισης: αυτόματη

Η οριζόντια στοίχιση με χρήση περιθωρίου χρησιμοποιείται όταν είναι γνωστό το πλάτος του κεντρικού στοιχείου. Λειτουργεί για στοιχεία μπλοκ:

Στοιχείο (περιθώριο-αριστερά: αυτόματο; περιθώριο-δεξιά: αυτόματο; πλάτος: 50%; )

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

text-align: κέντρο

Αυτή η μέθοδος είναι κατάλληλη για κεντράρισμα κειμένου μέσα σε μπλοκ. text-align: κέντρο:

Στοίχιση με text-align .wrapper ( text-align: center; )

Είμαι ευθυγραμμισμένος στο κέντρο

θέση και αρνητικό περιθώριο αριστερά

Κατάλληλο για κεντράρισμα μπλοκ γνωστού πλάτους. Δίνουμε τη θέση του γονικού μπλοκ: σε σχέση με τη θέση σε σχέση με αυτό, τη θέση του κεντρικού στοιχείου: απόλυτη , αριστερά: 50% και ένα αρνητικό περιθώριο αριστερά του οποίου η τιμή είναι ίση με το μισό του πλάτους του στοιχείου:

Ευθυγράμμιση με τη θέση .wrapper ( θέση: σχετική; ) .wrapper p ( αριστερά: 50%; περιθώριο: 0 0 0 -100 px; θέση: απόλυτη; πλάτος: 200 px; )

Είμαι ευθυγραμμισμένος στο κέντρο

οθόνη: inline-block + text-align: κέντρο

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

Ευθυγράμμιση με οθόνη: inline-block + text-align: center; .navigation (στοίχιση κειμένου: κέντρο; ) .navigation li ( οθόνη: inline-block; )

• Σπίτι
• Σχετικά με τον Συγγραφέα

Κάθετη ευθυγράμμιση γραμμή-ύψος

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

line-height .wrapper (ύψος: 100 px; line-height: 100 px; )

Είμαι κάθετα ευθυγραμμισμένος

θέση και αρνητικό περιθώριο προς τα πάνω

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

Περιτύλιγμα (θέση: σχετική; ) στοιχείο (ύψος: 200 εικονοστοιχεία; περιθώριο: -100 εικονοστοιχεία 0 0; θέση: απόλυτη; επάνω: 50%; )

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

οθόνη: πίνακας-κελί

Για κάθετη στοίχιση, η ιδιότητα εμφάνισης: πίνακας-κελί εφαρμόζεται στο στοιχείο, το οποίο το αναγκάζει να μιμηθεί ένα κελί πίνακα. Ρυθμίσαμε επίσης το ύψος και την κατακόρυφη ευθυγράμμιση: μέση . Ας τα τυλίξουμε όλα αυτά σε ένα δοχείο με το dislpay: τραπέζι· ιδιοκτησία. :

Οθόνη κάθετης ευθυγράμμισης: πίνακας-κελί .wrapper ( οθόνη: πίνακας; πλάτος: 100%; ) .κελί ( εμφάνιση: πίνακας-κελί; ύψος: 100 εικονοστοιχεία; κατακόρυφη στοίχιση: μέση; )

Είμαι κάθετα ευθυγραμμισμένος

Δυναμική στοίχιση ενός στοιχείου σε μια σελίδα

Εξετάσαμε τρόπους στοίχισης στοιχείων σε μια σελίδα χρησιμοποιώντας CSS. Τώρα ας ρίξουμε μια ματιά στην υλοποίηση του jQuery.

Ας συνδέσουμε το jQuery στη σελίδα:

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

Συνάρτηση alignCenter(elem) ( // κωδικός εδώ )

Στο σώμα της συνάρτησης, υπολογίζουμε δυναμικά και εκχωρούμε τις συντεταγμένες του κέντρου της σελίδας στις ιδιότητες CSS αριστερά και επάνω:

Συνάρτηση alignCenter(elem) ( elem.css(( αριστερά: ($(window).width() - elem.width()) / 2 + "px", επάνω: ($(window).height() - elem. height()) / 2 + "px" // μην ξεχάσετε να προσθέσετε θέση: απόλυτη στο στοιχείο για την ενεργοποίηση συντεταγμένων )) )

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

Η συνάρτηση είναι έτοιμη, το μόνο που μένει είναι να την προσαρτήσετε στα συμβάντα ετοιμότητας DOM και αλλαγής μεγέθους παραθύρου:

$(function() ( // καλέστε τη συνάρτηση κεντραρίσματος όταν το DOM είναι έτοιμο alignCenter($(elem)); // κλήση της συνάρτησης κατά την αλλαγή μεγέθους του παραθύρου $(window).resize(function() ( alignCenter($(elem) )); )) // συνάρτηση κεντραρίσματος στοιχείου alignCenter(elem) ( elem.css(( // υπολογισμός αριστερά και επάνω συντεταγμένων αριστερά: ($(window).width() - elem.width()) / 2 + " px", επάνω: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Εφαρμογή του Flexbox

Νέες δυνατότητες CSS3, όπως το Flexbox, γίνονται σταδιακά συνηθισμένες. Η τεχνολογία βοηθά στη δημιουργία σήμανσης χωρίς τη χρήση πλωτήρα, τοποθέτησης κ.λπ. Μπορεί επίσης να χρησιμοποιηθεί για να κεντράρει στοιχεία. Για παράδειγμα, εφαρμόστε το Flexbox στο γονικό στοιχείο.wrapper και κεντράρετε το περιεχόμενο μέσα:

Περιτύλιγμα ( οθόνη: -webkit-box; οθόνη: -moz-box; εμφάνιση: -ms-flexbox; εμφάνιση: -webkit-flex; οθόνη: flex; ύψος: 500 px; πλάτος: 500 px; ) .wrapper .content ( περιθώριο: αυτόματο; /* περιθώριο: 0 αυτόματο; μόνο οριζόντιο */ /* περιθώριο: αυτόματο 0; μόνο κατακόρυφο */ ) Lorem ipsum dolor sit amet

Αυτός ο κανόνας κεντράρει το στοιχείο οριζόντια και κατακόρυφα ταυτόχρονα - το περιθώριο λειτουργεί πλέον όχι μόνο για οριζόντια στοίχιση, αλλά και για κάθετη. Και χωρίς γνωστό πλάτος/ύψος.

Σχετικοί πόροι Βοηθήστε το έργο

Ένας σχεδιαστής έχει μερικές φορές μια ερώτηση: πώς να κεντράρει τα στοιχεία κάθετα; Και αυτό προκαλεί ορισμένα προβλήματα. Ωστόσο, υπάρχουν αρκετές μέθοδοι για κάθετα κεντράρισμα στοιχείων και καθεμία από αυτές τις μεθόδους είναι αρκετά απλή. Αυτό το άρθρο περιγράφει μερικές από αυτές τις μεθόδους.

Για να δείτε κάθε μέθοδο σε δράση, κάντε κλικ στο κουμπί επίδειξης ή στην εικόνα.

Ας συζητήσουμε μερικά από τα θέματα που εμποδίζουν το κάθετο κεντράρισμα.

Κάθετη-Ευθυγράμμιση

Το οριζόντιο κεντράρισμα ενός στοιχείου είναι αρκετά εύκολο να εφαρμοστεί (χρησιμοποιώντας CSS). Ένα ενσωματωμένο στοιχείο μπορεί να κεντραριστεί οριζόντια δίνοντας στο γονικό του κοντέινερ μια ιδιότητα στοίχισης κειμένου του κέντρου . Όταν ένα στοιχείο είναι στοιχείο μπλοκ, για να το κεντράρετε, πρέπει απλώς να ορίσετε το πλάτος (πλάτος) και να ορίσετε τις τιμές του δεξιού περιθωρίου (περιθώριο-δεξιό) και του αριστερού (περιθώριο-αριστερό) σε αυτόματο.

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

Ωστόσο, το χαρακτηριστικό valign λειτουργεί μόνο όταν εφαρμόζεται σε ένα κελί (για παράδειγμα, ). Η ιδιότητα κάθετης στοίχισης CSS μπορεί να εφαρμοστεί σε ένα κελί και σε ορισμένα ενσωματωμένα στοιχεία.

• Το κείμενο είναι κεντραρισμένο σε σχέση με το ύψος γραμμής (διάστιχο).
• Σε σχέση με τον πίνακα, χωρίς να μπούμε σε λεπτομέρειες, γίνεται κεντράρισμα σε σχέση με το ύψος της σειράς.

Δυστυχώς, η ιδιότητα κατακόρυφης στοίχισης δεν μπορεί να εφαρμοστεί σε στοιχεία σε επίπεδο μπλοκ, όπως η παράγραφος (p) μέσα ετικέτα div.

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

Διάστιχο ή Ύψος γραμμής

Αυτή η μέθοδοςΘα πρέπει να χρησιμοποιείται μόνο όταν χρειάζεται να κεντράρετε μια γραμμή κειμένου. Για να το κάνετε αυτό, πρέπει να ορίσετε το ύψος γραμμής (διάστιχο) του στοιχείου που περιέχει κείμενο σε μεγαλύτερο μέγεθος από το μέγεθος της γραμματοσειράς.

Από προεπιλογή, υπάρχει ίσος χώρος πάνω και κάτω από το κείμενο, επομένως το κείμενο είναι κεντραρισμένο κατακόρυφα.

Σε αυτήν την περίπτωση, δεν είναι απαραίτητο να καθορίσετε το ύψος του γονικού στοιχείου.

Κείμενο εδώ γιατί για εγκυρότητα είναι απαραίτητο να χρησιμοποιήσετε το μεταβατικό DOCTYPE> .

Αυτός ο τύπος επιτρέπει τη διέλευση απαγορευμένων στοιχείων.

ΚΕΝΤΡΟ

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

Λάβετε υπόψη ότι για την εικόνα το χαρακτηριστικό που αναλύουμε έχει ελαφρώς διαφορετική σημασία.

Στο παράδειγμα χρησιμοποίησα align=" μέση" . Χάρη σε αυτό, η εικόνα ευθυγραμμίστηκε έτσι ώστε η πρόταση να βρίσκεται καθαρά στη μέση της εικόνας.

Εργαλεία κεντραρίσματος σε css

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

Λοιπόν, ας ξεκινήσουμε με την πρώτη ιδιότητα κεντραρίσματος κειμένου - στοίχιση κειμένου.

Λειτουργεί με τον ίδιο τρόπο όπως το align in . Μεταξύ των λέξεων-κλειδιών μπορείτε να επιλέξετε μία από αυτές γενική λίσταή κληρονομούν τα χαρακτηριστικά ενός προγόνου (κληρονομούν).

Θα ήθελα να σημειώσω ότι στο css3 μπορείτε να ορίσετε 2 ακόμη παραμέτρους: start – ανάλογα με τους κανόνες γραφής κειμένου (από δεξιά προς τα αριστερά ή αντίστροφα) ορίζει τη στοίχιση προς τα αριστερά ή προς τα δεξιά (παρόμοια με την εργασία αριστερά ή δεξιά) και τέλος – το αντίθετο της αρχής (όταν γράφετε κείμενο από αριστερά προς τα δεξιά λειτουργεί ως δεξιά, όταν γράφεται από δεξιά προς τα αριστερά - αριστερά).

div στοίχιση κειμένου ( περίγραμμα: 5 εικονοστοιχεία διπλό κόκκινο, συμπλήρωση: 0 22 εικονοστοιχεία 0 22 εικονοστοιχεία; ) #l (στοίχιση κειμένου: δεξιά; ) #s (στοίχιση κειμένου: τέλος; )

Πρόταση στα δεξιά

Πρόταση που χρησιμοποιεί τέλος

Θα σας πω για ένα μικρό κόλπο. Όταν έχει επιλεγεί το justify, η τελευταία γραμμή μπορεί να κρέμεται μη ελκυστικά από το κάτω μέρος. Για να το τοποθετήσετε, για παράδειγμα, στο κέντρο, μπορείτε να χρησιμοποιήσετε την ιδιότητα text-align-last.

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

Λέξη-κλειδί	Σκοπός
γραμμή βάσης	Καθορίζει την ευθυγράμμιση σε μια προγονική γραμμή, που ονομάζεται γραμμή βάσης. Εάν το προγονικό αντικείμενο δεν έχει τέτοια γραμμή, τότε η ευθυγράμμιση γίνεται κατά μήκος του κάτω περιγράμματος.
Μέσης	Το μέσο του μεταλλαγμένου αντικειμένου ευθυγραμμίζεται με τη γραμμή βάσης, στην οποία προστίθεται το πάτωμα ύψους του γονικού στοιχείου.
κάτω μέρος	Το κάτω μέρος του επιλεγμένου περιεχομένου προσαρμόζεται στο κάτω μέρος του αντικειμένου κάτω από αυτό.
μπλουζα	Παρόμοια με το κάτω μέρος, μόνο με πάνω μέροςαντικείμενο.
σούπερ	Κάνει τον εκθέτη χαρακτήρα.
υπο	Κάνει το στοιχείο δείκτη.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

κάθετη ευθυγράμμιση FLOWER

κατακόρυφη στοίχιση div( μέγεθος γραμματοσειράς: 4em; στοίχιση κειμένου: κέντρο; διακόσμηση κειμένου: υπογράμμιση; ) #A(κάθετη στοίχιση: επάνω;) #B(κάθετη στοίχιση: μέση;) #C(κάθετη στοίχιση : super;) #D(κάθετη στοίχιση: υπο;) FLOWER

Εσοχές

Και τέλος φτάνουμε στις εσοχές της παραγράφου. Η γλώσσα CSS χρησιμοποιεί μια ειδική ιδιότητα που ονομάζεται εσοχή κειμένου .

Με τη βοήθειά του μπορείτε να κάνετε τόσο μια κόκκινη γραμμή όσο και μια προεξοχή (πρέπει να καθορίσετε μια αρνητική τιμή).

κείμενο-εσοχή #a ( εσοχή κειμένου: 53 εικονοστοιχεία; ) #β ( εσοχή κειμένου: -43 εικονοστοιχεία; ) div ( φόντο: #FFDAB9; πλάτος: 35%; μέγεθος γραμματοσειράς: 29 εικονοστοιχεία; περιθώριο-αριστερό: 30%; συμπλήρωση -αριστερά:50px;)

Για να δημιουργήσετε μια κόκκινη γραμμή χρειάζεται να γνωρίζετε μόνο μία παράμετρο.

Αυτή είναι η ιδιότητα απλής εσοχής κειμένου.

Επαινώ αυτούς που δοκίμασαν κάθε παράδειγμα στην πράξη. Στείλτε συνδέσμους για το blog μου στους φίλους σας και μην ξεχάσετε να εγγραφείτε. Καλή τύχη! Αντίο!

Με εκτίμηση, Roman Chueshov

Διαβάστηκε: 675 φορές