Σπίτι Επισκευή Όλα για την ευθυγράμμιση CSS. Πώς να κάνετε στοίχιση κειμένου στο κέντρο, το πλάτος, τις άκρες της σελίδας σε HTML

Όλα για την ευθυγράμμιση CSS. Πώς να κάνετε στοίχιση κειμένου στο κέντρο, το πλάτος, τις άκρες της σελίδας σε HTML

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

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

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

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



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


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




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

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

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

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

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





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

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

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






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






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






Με εκτίμηση, Mikhail Rusakov.

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

18.02.15 21,4Κ

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

Πλεονεκτήματα της διάταξης με χρήση ετικέτας

Υπάρχουν δύο κύριοι τύποι κατασκευής δομής τοποθεσίας:

  • πινακοειδής;
  • ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.

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

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

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

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

Αποκλεισμός δόμησης με βάση ετικέτες

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

Βοηθήματα τοποθέτησης

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

, είναι πλωτήρας.
Σύνταξη ιδιότητας:
float: αριστερά | δεξιά | κανένα | κληρονομώ,
Οπου:

  • αριστερά - ευθυγραμμίζει το στοιχείο στο αριστερό άκρο της οθόνης. Τα υπόλοιπα στοιχεία τυλίγονται προς τα δεξιά.
  • δεξιά - ευθυγράμμιση στα δεξιά, τυλίγοντας τα υπόλοιπα στοιχεία - στα αριστερά.
  • κανένα - δεν επιτρέπεται το τύλιγμα.
  • κληρονομώ - κληρονομιά αξίας γονικό στοιχείο.

Εξετάστε ένα ελαφρύ παράδειγμα τοποθέτησης div χρησιμοποιώντας αυτήν την ιδιότητα:

Αριστερό μπλοκ


Τώρα ας προσπαθήσουμε να χρησιμοποιήσουμε την ίδια ιδιότητα για να τοποθετήσουμε το τρίτο div στο κέντρο της σελίδας. Αλλά δυστυχώς το float δεν έχει κεντρική τιμή. Και όταν σε ένα νέο μπλοκ δίνεται μια τιμή ευθυγράμμισης προς τα δεξιά ή προς τα αριστερά, μετατοπίζεται προς την καθορισμένη κατεύθυνση. Επομένως, μένει μόνο να ρυθμίσετε και τα τρία μπλοκ να επιπλέουν: αριστερά :


Αλλά ούτε αυτή είναι η καλύτερη επιλογή. Όταν το παράθυρο μειώνεται, όλα τα στρώματα ευθυγραμμίζονται σε μία σειρά κατακόρυφα και όταν το μέγεθος αυξάνεται, κολλάνε στην αριστερή άκρη του παραθύρου. Χρειαζόμαστε λοιπόν έναν καλύτερο τρόπο να κεντράρουμε τα div.

Επίπεδα κεντραρίσματος

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

Αριστερό μπλοκ

κεντρικό μπλοκ


Αυτό το ίδιο παράδειγμα δείχνει πώς μπορείτε να κεντράρετε ένα div οριζόντια. Και αν επεξεργαστείτε ελαφρώς τον παραπάνω κώδικα, τότε μπορείτε να επιτύχετε κάθετη ευθυγράμμιση των μπλοκ. Για να το κάνετε αυτό, πρέπει απλώς να αλλάξετε το μήκος του στρώματος του δοχείου (μειώστε το). Δηλαδή, μετά την επεξεργασία του css, η τάξη θα πρέπει να μοιάζει με αυτό:

Μετά την αλλαγή, όλα τα μπλοκ θα ευθυγραμμιστούν αυστηρά σε μια σειρά στη μέση. Και η θέση τους δεν θα αλλάξει σε οποιοδήποτε μέγεθος του παραθύρου του προγράμματος περιήγησης. Έτσι φαίνεται ένα div με κέντρο κάθετα:


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


Μια σύντομη περιγραφή των ιδιοτήτων css και των τιμών τους που χρησιμοποιήσαμε αυτό το παράδειγμαγια να κεντράρετε ένα div μέσα σε ένα div :
  • εμφάνιση: inline-block - ευθυγραμμίζει ένα στοιχείο μπλοκ σε μια γραμμή και το τυλίγει με ένα άλλο στοιχείο.
  • κατακόρυφη στοίχιση: μέση - ευθυγραμμίζει το στοιχείο στη μέση σε σχέση με το γονικό.
  • margin-left - ορίζει το περιθώριο στα αριστερά.

Πώς να δημιουργήσετε έναν σύνδεσμο από ένα επίπεδο

Όσο περίεργο κι αν ακούγεται, είναι πιθανό. Μερικές φορές μπορεί να χρειαστεί ένα μπλοκ div ως σύνδεσμος κατά τη διάταξη διάφορα είδημενού. Εξετάστε ένα πρακτικό παράδειγμα υλοποίησης ενός επιπέδου σύνδεσης:

Σύνδεσμος στον ιστότοπό μας


Σε αυτό το παράδειγμα, χρησιμοποιώντας την εμφάνιση γραμμής: μπλοκ , ορίσαμε τη σύνδεση στην τιμή ενός στοιχείου μπλοκ. Και για να γίνει ολόκληρο το ύψος του div ως σύνδεσμος, ορίστε το ύψος : 100%.

Απόκρυψη και εμφάνιση στοιχείων μπλοκ

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

Ειδικά αφορά αρχική σελίδα, το κόστος διαφήμισης στο οποίο είναι το υψηλότερο. Ως εκ τούτου, προκύπτει το πρόβλημα, πού να «χωθεί» ακόμη ένα διαφημιστικό πανό. Και εδώ δεν μπορείτε να ξεφύγετε με την ευθυγράμμιση του div στο κέντρο της σελίδας!

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

Αυτό είναι το μαγικό κουμπί. Κάνοντας κλικ σε αυτό θα κρυφτεί ή θα εμφανιστεί το κρυφό μπλοκ.

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

Ας ξεκινήσουμε με γενική περιγραφήκαθήκοντα.

Πρόβλημα κάθετου κεντραρίσματος

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

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

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

Η τιμή της ιδιότητας κατακόρυφης στοίχισης είναι σχετική με το γονικό ενσωματωμένο στοιχείο.

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

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

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

μέθοδος ύψους γραμμής

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

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

HTML:

Επιθυμητό κείμενο

CSS:

#child (ύψος γραμμής: 200 εικονοστοιχεία; )

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

Κεντράρισμα εικόνας με ύψος γραμμής

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

HTML:

CSS:

#parent (ύψος γραμμής: 200 εικονοστοιχεία; ) #parent img (κατακόρυφη στοίχιση: μέση; )

Η τιμή της ιδιότητας line-height πρέπει να είναι μεγαλύτερη από το ύψος της εικόνας.

Μέθοδος πίνακα CSS

Όπως αναφέρθηκε παραπάνω, η ιδιότητα κατακόρυφης στοίχισης ισχύει για κελιά πίνακα, όπου λειτουργεί εξαιρετικά. Μπορούμε να αποδώσουμε το στοιχείο μας ως κελί πίνακα και να χρησιμοποιήσουμε την ιδιότητα vertical-align σε αυτό για να κεντράρουμε το περιεχόμενο κατακόρυφα.

Σημείωση:Ένας πίνακας CSS δεν είναι ίδιος με έναν πίνακα HTML.

HTML:

Περιεχόμενο

CSS:

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

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

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

Το μειονέκτημα αυτής της μεθόδου είναι ότι δεν λειτουργεί σε παλαιότερες εκδόσεις του IE. Πρέπει να χρησιμοποιήσετε την ιδιότητα display: inline-block για το ένθετο κοντέινερ.

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

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

Ο κώδικας του παραδείγματος κάνει ταυτόχρονα οριζόντιο και κατακόρυφο κεντράρισμα:

HTML:

Περιεχόμενο

CSS:

#γονέας (θέση: συγγενής;) #παιδί (θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; ύψος: 30%; πλάτος: 50%; περιθώριο: -15% 0 0 -25%; )

Αρχικά, ορίζουμε τον τύπο τοποθέτησης των στοιχείων. Στη συνέχεια, στο ένθετο div, ορίστε τις ιδιότητες επάνω και αριστερά στο 50%, που είναι το κέντρο του γονικού στοιχείου. Όμως το κέντρο χτυπάει αριστερά πάνω γωνίαένθετο στοιχείο. Επομένως, πρέπει να το σηκώσετε (το μισό ύψος) και να το μετακινήσετε προς τα αριστερά (το μισό πλάτος) και στη συνέχεια το κέντρο θα συμπίπτει με το κέντρο του γονικού στοιχείου. Άρα η γνώση του ύψους του στοιχείου είναι απαραίτητη σε αυτή την περίπτωση. Έπειτα δίνουμε στο στοιχείο αρνητικά πάνω και αριστερά περιθώρια ίσα με το μισό του ύψους και του πλάτους, αντίστοιχα.

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

Απόλυτη τοποθέτηση και διάταση

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

HTML:

Περιεχόμενο

CSS:

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

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

Η ρύθμιση του αυτόματου σχηματισμού περιθωρίων σε όλες τις πλευρές θα έχει ως αποτέλεσμα την εργασία ίσες αξίεςκαι στις 4 πλευρές και θα φέρει το ένθετο στοιχείο div μας στο κέντρο του γονικού στοιχείου.

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

Ίση επένδυση πάνω και κάτω

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

HTML:

Περιεχόμενο

CSS:

#parent ( padding: 5% 0; ) #child ( padding: 10% 0; )

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

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

Για παράδειγμα, εάν το γονικό στοιχείο έχει ύψος 400 εικονοστοιχεία και το ένθετο στοιχείο έχει ύψος 100 εικονοστοιχεία, τότε απαιτείται πλήρωση 150 εικονοστοιχείων στο επάνω και στο κάτω μέρος.

150 + 150 + 100 = 400

Η χρήση του % επιτρέπει στους υπολογισμούς να αφήνονται στο πρόγραμμα περιήγησης.

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

Σημείωση:Αυτή η μέθοδος λειτουργεί ορίζοντας το περιθώριο του στοιχείου. Μπορείτε επίσης να χρησιμοποιήσετε περιθώρια σε ένα στοιχείο. Η απόφαση για την εφαρμογή περιθωρίων ή padding θα πρέπει να λαμβάνεται ανάλογα με τις ιδιαιτερότητες του έργου.

πλωτό div

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

HTML:

Περιεχόμενο

CSS:

#parent (ύψος: 250 px;) #floater ( float: αριστερά; ύψος: 50%; πλάτος: 100%; margin-bottom: -50 px; ) #child ( καθαρό: και τα δύο; ύψος: 100 px; )

Μετατοπίζουμε το κενό div αριστερά ή δεξιά και του δίνουμε ύψος 50% του γονικού στοιχείου. Με αυτόν τον τρόπο θα γεμίσει το επάνω μισό του γονικού στοιχείου.

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

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

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

συμπέρασμα

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

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

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

Τι είναι το DIV

Το όνομα του στοιχείου προέρχεται από την αγγλική λέξη division, που σημαίνει διαίρεση. Κατά τη σύνταξη σήμανσης, χρησιμοποιείται για τη διάσπαση στοιχείων σε μπλοκ. Τα DIV περικλείουν ομάδες περιεχομένου σε μια ιστοσελίδα. Για παράδειγμα, εικόνες, παράγραφοι με κείμενο. Η ετικέτα δεν επηρεάζει με κανέναν τρόπο την εμφάνιση του περιεχομένου και δεν φέρει κανένα σημασιολογικό φορτίο.

Το DIV υποστηρίζει όλα τα καθολικά χαρακτηριστικά. Αλλά για το σχεδιασμό ιστοσελίδων, χρειάζεστε μόνο δύο - μια τάξη και ένα αναγνωριστικό. Όλα τα υπόλοιπα θα τα θυμάστε μόνο σε εξωτικές περιπτώσεις, και αυτό δεν είναι γεγονός. Το χαρακτηριστικό align, το οποίο χρησιμοποιήθηκε για τη στοίχιση στο κέντρο ή αριστερά ενός div, έχει καταργηθεί.

Πότε να χρησιμοποιείτε DIV

Φανταστείτε ότι ο ιστότοπος είναι ψυγείο και τα DIV είναι πλαστικά δοχεία βάσει των οποίων πρέπει να ταξινομήσετε το περιεχόμενο. Δεν θα βάλετε φρούτα στο ίδιο δοχείο με το συκώτι. Κάθε είδος προϊόντος βάζετε ξεχωριστά. Το περιεχόμενο Ιστού δημιουργείται με παρόμοιο τρόπο.

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

έγγραφο

Τώρα αποσυναρμολογήστε κάθε τμήμα με περισσότερες λεπτομέρειες. Ξεκινήστε με κεφαλίδα. Η κεφαλίδα του ιστότοπου έχει ξεχωριστό λογότυπο, πλοήγηση, επικεφαλίδα πρώτου επιπέδου και μερικές φορές σλόγκαν. Αντιστοιχίστε το δικό σας κοντέινερ σε κάθε σημασιολογικό μπλοκ. Αυτό όχι μόνο θα διαχωρίσει τα στοιχεία στη ροή, αλλά θα διευκολύνει και τη μορφοποίησή τους. Θα είναι πολύ πιο εύκολο για εσάς να κεντράρετε το αντικείμενο στην ετικέτα DIV δίνοντάς του μια κλάση ή αναγνωριστικό.

Ευθυγράμμιση DIV στο κέντρο με περιθώρια

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

div( περίγραμμα: 1px συμπαγές #333; περίγραμμα-αριστερά: κανένα; )

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

Block-with-img (περιθώριο-αριστερά: 20%; )

Τα στοιχεία μπορούν επίσης να μορφοποιηθούν χρησιμοποιώντας τις τιμές πλάτους τους και την αρνητική γέμιση. Για παράδειγμα, υπάρχει ένα μπλοκ με διαστάσεις 200px επί 200px. Αρχικά, ορίστε του μια απόλυτη θέση και μετακινήστε το στο κέντρο κατά 50%.

Div(θέση: απόλυτη, αριστερά: 50%; )

Τώρα, για να βεβαιωθείτε ότι το DIV είναι τέλεια κεντραρισμένο, δώστε του μια αρνητική αριστερή επένδυση ίση με το 50% του πλάτους του, δηλαδή -100 pixel:

περιθώριο-αριστερά: -100 εικονοστοιχεία

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

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

Πώς να κεντράρετε το μπλοκ div χρησιμοποιώντας αυτόματα περιθώρια

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

Χρησιμοποιήστε τη μέθοδο αυτόματου περιθωρίου κατά την ανάπτυξη αποκριτικών εφαρμογών. Το κλειδί είναι να δώσετε στο δοχείο μια τιμή πλάτους σε ems ή ποσοστά. Ο κωδικός από το παραπάνω παράδειγμα θα κεντράρει το DIV σε οποιαδήποτε συσκευή, συμπεριλαμβανομένης της Κινητά τηλέφωνα, θα καταλάβει το 90% της οθόνης.

Στοίχιση μέσω της οθόνης ιδιοτήτων: inline-block

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

Οποιοδήποτε κείμενο

Σε ένα στοιχείο με κλάση outer-div εκχωρείται μια ιδιότητα στοίχισης κειμένου με τιμή κέντρου, η οποία κεντράρει το κείμενο μέσα. Αλλά προς το παρόν, το πρόγραμμα περιήγησης βλέπει το ένθετο DIV ως αντικείμενο μπλοκ. Για να λειτουργήσει η ιδιότητα text-align, το inner-div πρέπει να αντιμετωπίζεται ως ενσωματωμένο. Επομένως, σε Πίνακας CSSγια τον επιλογέα inner-div, γράφετε τον ακόλουθο κώδικα:

Inner-div (οθόνη: inline-block;)

Αλλάζετε την ιδιότητα εμφάνισης από block σε inline-block.

μέθοδος μετατροπής/μετάφρασης

Τα Cascading Style Sheets σάς επιτρέπουν να μετακινείτε, να λοξώνετε, να περιστρέφετε και να μεταμορφώνετε στοιχεία Ιστού κατά βούληση. Για αυτό, χρησιμοποιείται η ιδιότητα μετασχηματισμού. Ο επιθυμητός τύπος μετασχηματισμού και ο βαθμός καθορίζονται ως τιμές. Σε αυτό το παράδειγμα, θα εργαστούμε με τη μετάφραση:

transform: translate(50%, 50%);

Η συνάρτηση μετάφρασης μετακινεί ένα στοιχείο από την τρέχουσα θέση του αριστερά/δεξιά και πάνω/κάτω. Δύο τιμές περνούν σε παρένθεση:

  • βαθμός οριζόντιας κίνησης.
  • βαθμός κάθετης κίνησης.

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

Transform: translateY(-20%);

Σε ορισμένους οδηγούς, μπορείτε να δείτε μετασχηματισμό με προθέματα προμηθευτή:

webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);

Το 2018, αυτό δεν είναι πλέον απαραίτητο, η ιδιότητα υποστηρίζεται από όλα τα προγράμματα περιήγησης, συμπεριλαμβανομένων των Edge και IE.

Για να κεντράρουμε το DIV που χρειαζόμαστε, η συνάρτηση translate CSS γράφεται με τιμή 50% για τον κάθετο και τον οριζόντιο άξονα. Αυτό θα κάνει το πρόγραμμα περιήγησης να μετακινήσει το στοιχείο από την τρέχουσα θέση του στο μισό του πλάτους και του ύψους του. Οι ιδιότητες πλάτους και ύψους πρέπει να προσδιορίζονται:

έγγραφο

Ακολουθεί ένα κείμενο

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

Εργασία με διάταξη Flexbox

Το Flexbox θεωρείται με περίπλοκο τρόποδιατάξεις διάταξης ιστού. Αν όμως το κατακτήσεις, θα καταλάβεις ότι είναι πολύ πιο εύκολο και πιο ευχάριστο από τυπικούς τρόπουςμορφοποίηση. Η προδιαγραφή Flexbox είναι ένας ευέλικτος και απίστευτα ισχυρός τρόπος χειρισμού στοιχείων. ΑΠΟ της αγγλικής γλώσσαςΤο όνομα της ενότητας μεταφράζεται ως "ευέλικτο δοχείο". Οι τιμές του πλάτους, του ύψους, της διάταξης των στοιχείων προσαρμόζονται αυτόματα, χωρίς να υπολογίζονται εσοχές και περιθώρια.

Στα προηγούμενα παραδείγματα, δουλέψαμε ήδη με την ιδιότητα εμφάνισης, αλλά την ορίσαμε σε τιμές μπλοκ (block) και inline (inline-block). Για να δημιουργήσουμε ευέλικτες διατάξεις, θα χρησιμοποιήσουμε το display: flex. Πρώτα χρειαζόμαστε ένα εύκαμπτο δοχείο:

Για να το μετατρέψουμε σε εύκαμπτο κοντέινερ σε διαδοχικούς πίνακες, γράφουμε:

Flex-container (οθόνη: flex;)

Όλα τα αντικείμενα που είναι φωλιασμένα σε αυτό, αλλά μόνο τα απευθείας παιδιά, θα είναι εύκαμπτα αντικείμενα:

Ο πρώτος
Δεύτερος
Τρίτος
Τέταρτος

Εάν μια λίστα τοποθετηθεί μέσα σε ένα flex κοντέινερ, τότε τα στοιχεία στη λίστα li δεν θεωρούνται ευέλικτα στοιχεία. Η διάταξη Flexbox θα λειτουργεί μόνο σε ul:

Κανόνες τοποθέτησης flex αντικειμένων

Για να διαχειριστείτε ευέλικτα στοιχεία, χρειάζεστε στοιχεία δικαιολογήσεως περιεχομένου και ευθυγράμμισης. Ανάλογα με τις τιμές που καθορίζετε, αυτές οι δύο ιδιότητες τοποθετούν αυτόματα τα αντικείμενα όπως απαιτείται. Εάν χρειάζεται να κεντράρουμε όλα τα ένθετα DIV, γράφουμε justify-content: center, align-items: center και τίποτα άλλο. Το πρόγραμμα περιήγησης θα κάνει την υπόλοιπη δουλειά:

έγγραφο

Ο πρώτος
Δεύτερος
Τρίτος
Τέταρτος

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

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

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

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

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

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

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

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

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

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

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

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

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

Ευθυγράμμιση με "text-align: center"

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

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

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

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

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

.example-wrapper3 (στοίχιση κειμένου: κέντρο; φόντο: #FF90B8;) .inline-text (εμφάνιση: inline-block; πλάτος: 40%; padding: 10 px; στοίχιση κειμένου: αριστερά; φόντο: #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; ) 1.5; κατακόρυφη στοίχιση: μέση; φόντο: #FFFAF2; χρώμα: #FF9-align; ;)

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

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

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

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

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

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

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

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

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

.example-wrapper6 (ύψος : 300 εικονοστοιχεία ; στοίχιση κειμένου : κέντρο ; φόντο : #70DAF1 ; ) .pudge ( οθόνη : inline-block ; κατακόρυφη στοίχιση : μέση ; φόντο : url (pudge.png) , χρώμα φόντου : # fff ; πλάτος : 200 εικονοστοιχεία ; ύψος : 200 εικονοστοιχεία ; ) .riki ( οθόνη : ενσωματωμένο μπλοκ ; ύψος : 100 % , κατακόρυφη στοίχιση : μέση ; )

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

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

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

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

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

2022 bar812.ru. Ακριβώς για το συγκρότημα. Προγράμματα. Σίδερο. Διαδίκτυο. Windows