Κεντράρισμα αντικειμένου css. Κεντράροντας μια εικόνα χρησιμοποιώντας το ύψος γραμμής. Ευθυγράμμιση με την ιδιότητα flex
Υπάρχουν αρκετοί θεμελιωδώς διαφορετικοί τρόποι για να κεντράρετε ένα αντικείμενο κάθετα χρησιμοποιώντας CSS, αλλά η επιλογή του σωστού μπορεί να είναι δύσκολη. Θα δούμε μερικά από αυτά και θα φτιάξουμε επίσης μια μικρή ιστοσελίδα χρησιμοποιώντας τις γνώσεις που αποκτήθηκαν.
Η κατακόρυφη στοίχιση στο κέντρο δεν είναι εύκολο να επιτευχθεί χρησιμοποιώντας CSS. Υπάρχουν πολλοί τρόποι και δεν λειτουργούν όλοι σε όλα τα προγράμματα περιήγησης. Ας δούμε 5 διαφορετικές μεθόδους και τα πλεονεκτήματα και τα μειονεκτήματα της καθεμιάς. Παράδειγμα.
Αυτή η μέθοδος προϋποθέτει ότι ορίσαμε κάποιο στοιχείο να εμφανίζεται ως πίνακας και μετά μπορούμε να χρησιμοποιήσουμε την ιδιότητα κατακόρυφης στοίχισης σε αυτό (η οποία λειτουργεί διαφορετικά σε διαφορετικά στοιχεία).
Μερικές χρήσιμες πληροφορίες που πρέπει να επικεντρωθούν. #wrapper( εμφάνιση: πίνακας; ) #κελί (εμφάνιση: πίνακας-κελί; κατακόρυφη στοίχιση: μέση; )
πλεονεκτήματα- Το περιεχόμενο μπορεί να αλλάζει ύψος δυναμικά (το ύψος δεν ορίζεται στο CSS).
- Το περιεχόμενο δεν διακόπτεται εάν δεν υπάρχει αρκετός χώρος για αυτό.
- Δεν λειτουργεί σε IE 7 ή λιγότερο
- Πολλές ένθετες ετικέτες
Αυτή η μέθοδος χρησιμοποιεί την απόλυτη τοποθέτηση του div, με το πάνω μέρος να έχει οριστεί στο 50% και το margin-top μείον το μισό ύψος του περιεχομένου. Αυτό σημαίνει ότι το αντικείμενο πρέπει να έχει ένα σταθερό ύψος, το οποίο ορίζεται στα στυλ CSS.
Δεδομένου ότι το ύψος είναι σταθερό, μπορείτε να ορίσετε υπερχείλιση:auto; για ένα div που περιέχει περιεχόμενο, επομένως, εάν το περιεχόμενο δεν ταιριάζει, θα εμφανιστούν γραμμές κύλισης.
Περιεχόμενο εδώ #content (θέση: απόλυτη; κορυφή: 50%; ύψος: 240 εικονοστοιχεία; περιθώριο κορυφής: -120 εικονοστοιχεία; /* μείον το μισό ύψος */ )
πλεονεκτήματα- Λειτουργεί σε όλα τα προγράμματα περιήγησης.
- Δεν υπάρχει περιττή φωλιά.
- Όταν δεν υπάρχει αρκετός χώρος, το περιεχόμενο εξαφανίζεται (για παράδειγμα, το div βρίσκεται μέσα στο σώμα και ο χρήστης έχει κάνει τα παράθυρα μικρότερα, οπότε οι γραμμές κύλισης δεν θα εμφανίζονται.
Σε αυτή τη μέθοδο, θα τυλίξουμε το περιεχόμενο div με ένα άλλο div. Ας ορίσουμε το ύψος του στο 50% (ύψος: 50%;) και το κάτω περιθώριο στο μισό του ύψους (margin-bottom:-contentheight;). Το περιεχόμενο θα διαγραφεί ως float και θα είναι κεντραρισμένο.
εδώ είναι το περιεχόμενο #floater( float: αριστερά; ύψος: 50%; margin-bottom: -120 px; ) #content( clear: και τα δύο; ύψος: 240 px; θέση: σχετική; )
πλεονεκτήματα- Λειτουργεί σε όλα τα προγράμματα περιήγησης.
- Όταν δεν υπάρχει αρκετός χώρος (για παράδειγμα, όταν το παράθυρο είναι μειωμένο), το περιεχόμενο δεν περικόπτεται, εμφανίζονται γραμμές κύλισης.
- Μπορώ να σκεφτώ μόνο ένα πράγμα: ότι χρησιμοποιείται ένα επιπλέον κενό στοιχείο.
Αυτή η μέθοδος χρησιμοποιεί την ιδιότητα position:absolute; για div με σταθερές διαστάσεις (πλάτος και ύψος). Στη συνέχεια ορίζουμε τις συντεταγμένες του στην κορυφή:0; bottom:0; , αλλά επειδή έχει σταθερό ύψος, δεν μπορεί να τεντωθεί και είναι ευθυγραμμισμένο στο κέντρο. Αυτό μοιάζει πολύ με τη γνωστή μέθοδο οριζόντιας κεντραρίσματος ενός στοιχείου μπλοκ σταθερού πλάτους (περιθώριο: 0 αυτόματο;).
Σημαντικές πληροφορίες. #content( θέση: απόλυτη; επάνω: 0; κάτω: 0; αριστερά: 0; δεξιά: 0; περιθώριο: αυτόματο; ύψος: 240 εικονοστοιχεία; πλάτος: 70%; )
πλεονεκτήματα- Πολύ απλό.
- Δεν λειτουργεί στον Internet Explorer
- Το περιεχόμενο θα αποκοπεί χωρίς γραμμές κύλισης εάν δεν υπάρχει αρκετός χώρος στο κοντέινερ.
Χρησιμοποιώντας αυτήν τη μέθοδο, μπορείτε να στοιχίσετε στο κέντρο μία γραμμή κειμένου. Απλώς ορίζουμε το ύψος του κειμένου (γραμμή-ύψος) ίσο με το ύψος του στοιχείου (ύψος). Μετά από αυτό, η γραμμή θα εμφανιστεί στο κέντρο.
Κάποια γραμμή κειμένου #content (ύψος: 100 εικονοστοιχεία, ύψος γραμμής: 100 εικονοστοιχεία; )
πλεονεκτήματα- Λειτουργεί σε όλα τα προγράμματα περιήγησης.
- Δεν κόβει το κείμενο αν δεν ταιριάζει.
- Λειτουργεί μόνο με κείμενο (δεν λειτουργεί με στοιχεία μπλοκ).
- Εάν υπάρχουν περισσότερες από μία γραμμές κειμένου, φαίνεται πολύ κακό.
Αυτή η μέθοδος είναι πολύ χρήσιμη για μικρά στοιχεία, όπως το κεντράρισμα του κειμένου σε ένα κουμπί ή πεδίο κειμένου.
Τώρα ξέρετε πώς να επιτύχετε κάθετη στοίχιση στο κέντρο, ας φτιάξουμε έναν απλό ιστότοπο που θα καταλήξει να μοιάζει με αυτό:
Είναι πάντα καλό να ξεκινάμε με σημασιολογική σήμανση. Η δομή της σελίδας μας θα είναι ως εξής:
- #floater (στο κέντρο περιεχομένου)
- #centred (κεντρικό στοιχείο)
- #πλευρά
- #λογότυπο
- #nav (λίστα
- #περιεχόμενο
- #bottom (για πνευματικά δικαιώματα και όλα αυτά)
Ας γράψουμε την ακόλουθη σήμανση html:
Μια Επικεντρωμένη Εταιρεία Μια Εταιρεία
Τίτλος σελίδαςΑνασχεδιάστε ολιστικά την εξωτερική ανάθεση προστιθέμενης αξίας μετά από συνεργασία με επίκεντρο τη διαδικασία και την ανταλλαγή ιδεών. Απλοποιήστε ενεργειακά τις σημαντικές εξειδικευμένες αγορές μέσω ενεργοποιημένων επιταγών. Ολιστικά κυριαρχεί η premium καινοτομία μετά από συναρπαστικά σενάρια. Ανακεφαλαιώστε απρόσκοπτα τα υψηλά πρότυπα στο ανθρώπινο κεφάλαιο με κορυφαία κατασκευασμένα προϊόντα. Συνδυάστε ευδιάκριτα σχήματα συμβατά με πρότυπα πριν από ισχυρά vortals. Ανακεφαλαιώστε μοναδικά τη μοχλευμένη ετοιμότητα ιστού σε σχέση με τις εξωγενείς πληροφορίες.
Επικεφαλίδα 2Αγκαλιάστε αποτελεσματικά προσαρμοσμένη ετοιμότητα ιστού αντί για διαδικασίες που κατευθύνονται από τον πελάτη. Αναπτύξτε δυναμικά τις επιταγές μεταξύ πλατφορμών σε σχέση με τις προληπτικές τεχνολογίες. Ενισχύστε βολικά πολυεπιστημονικές μετα-υπηρεσίες χωρίς διεπαφές σε επίπεδο επιχείρησης. Εξορθολογίστε άνετα ανταγωνιστικές στρατηγικές θεματικές περιοχές με εστιασμένες ηλεκτρονικές αγορές. Φωσφοριζέ συνδικάτο κοινότητες παγκόσμιας κλάσης έναντι των αγορών προστιθέμενης αξίας. Ανακαλύψτε εκ νέου τις ολιστικές υπηρεσίες πριν από ισχυρές ηλεκτρονικές υπηρεσίες.
Η ειδοποίηση πνευματικών δικαιωμάτων πηγαίνει εδώ
Βήμα 2Τώρα θα γράψουμε το απλούστερο CSS για να τοποθετήσουμε στοιχεία στη σελίδα. Θα πρέπει να αποθηκεύσετε αυτόν τον κώδικα σε ένα αρχείο style.css. Σε αυτό γράφεται ο σύνδεσμος στο αρχείο html.
Html, body ( περιθώριο: 0; padding: 0; ύψος: 100%; ) body ( background: url("page_bg.jpg") 50% 50% no-repeat #FC3; γραμματοσειρά-οικογένεια: Georgia, Times, serifs; ) #floater ( θέση: σχετική; float: αριστερά; ύψος: 50%; περιθώριο-κάτω: -200 px; πλάτος: 1 px; ) #centred ( θέση: σχετική; σαφή: αριστερά; ύψος: 400 px; πλάτος: 80%; μέγ. -πλάτος: 800 εικονοστοιχεία: 400 εικονοστοιχεία: αυτόματο περιθώριο: 4 εικονοστοιχεία συμπαγές #666 ) ; Κάτω: 0, γέμιση: #περιεχόμενο;
Προτού ευθυγραμμιστεί το κέντρο περιεχομένου μας, πρέπει να ορίσουμε το ύψος του σώματος και της html στο 100%. Δεδομένου ότι το ύψος υπολογίζεται χωρίς εσωτερική και εξωτερική γέμιση (padding και margin), τα ορίζουμε (padding) στο 0 ώστε να μην υπάρχουν γραμμές κύλισης.
Το κάτω περιθώριο για ένα στοιχείο "floater" είναι ίσο με μείον το μισό ύψος περιεχομένου (400 px), δηλαδή -200 px ;
Η σελίδα σας θα πρέπει τώρα να μοιάζει με αυτό:
#κεντραρισμένο πλάτος στοιχείου 80%. Αυτό κάνει τον ιστότοπό μας πιο στενό σε μικρές οθόνες και ευρύτερο σε μεγαλύτερες. Οι περισσότεροι ιστότοποι φαίνονται απρεπείς στις νέες ευρείες οθόνες στην επάνω αριστερή γωνία. Οι ιδιότητες min-width και max-width περιορίζουν επίσης τη σελίδα μας ώστε να μην φαίνεται πολύ φαρδιά ή πολύ στενή. Ο Internet Explorer δεν υποστηρίζει αυτές τις ιδιότητες. Πρέπει να το ρυθμίσετε σε ένα σταθερό πλάτος.
Δεδομένου ότι το #centered στοιχείο έχει θέση:σχετικό σύνολο, μπορούμε να χρησιμοποιήσουμε απόλυτη τοποθέτηση των στοιχείων μέσα σε αυτό. Στη συνέχεια ορίστε υπερχείλιση:auto; για το στοιχείο #content, ώστε να εμφανίζονται γραμμές κύλισης εάν το περιεχόμενο δεν ταιριάζει.
Βήμα 3Το τελευταίο πράγμα που θα κάνουμε είναι να προσθέσουμε λίγο στυλ για να κάνουμε τη σελίδα να φαίνεται λίγο πιο ελκυστική. Ας ξεκινήσουμε με το μενού.
#nav ul ( στιλ λίστας: κανένα; συμπλήρωση: 0; περιθώριο: 20 εικονοστοιχεία 0 0 0; εσοχή κειμένου: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; χρώμα φόντου: #e8e8e8 περιθώριο: 1px συμπαγές περιεχόμενο: """, βάρος γραμματοσειράς: δεξιά, περιθώριο: 0 2 px; f8f8f8; : #777;
Το πρώτο πράγμα που κάναμε για να κάνουμε το μενού να φαίνεται καλύτερο ήταν να αφαιρέσουμε τις κουκκίδες ορίζοντας το χαρακτηριστικό list-style:none και επίσης ορίσαμε το padding και το padding, καθώς διαφέρουν πολύ από προεπιλογή σε διαφορετικά προγράμματα περιήγησης.
Σημειώστε ότι στη συνέχεια καθορίσαμε ότι οι σύνδεσμοι πρέπει να αποδίδονται ως στοιχεία μπλοκ. Τώρα, όταν εμφανίζονται, τεντώνονται σε όλο το πλάτος του στοιχείου στο οποίο βρίσκονται.
Ένα άλλο ενδιαφέρον πράγμα που χρησιμοποιήσαμε για το μενού είναι οι ψευδο-κλάσεις:πριν και:μετά. Σας επιτρέπουν να προσθέσετε κάτι πριν και μετά από ένα στοιχείο. Αυτός είναι ένας καλός τρόπος για να προσθέσετε εικονίδια ή σύμβολα, όπως ένα βέλος στο τέλος κάθε συνδέσμου. Αυτό το τέχνασμα δεν λειτουργεί στον Internet Explorer 7 και παρακάτω.
Βήμα 4
Και τέλος, αλλά όχι λιγότερο σημαντικό, θα προσθέσουμε μερικές βίδες στο σχέδιό μας για ακόμα περισσότερη ομορφιά.
#centred ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- Βάρος γραμματοσειράς: κανονικό; padding-top: 0? ισχυρό ( βάρος γραμματοσειράς: κανονικό; ) #εύρος λογότυπου (εμφάνιση: μπλοκ; μέγεθος γραμματοσειράς: 4em; ύψος γραμμής: 0,7em; χρώμα: #666; ) p, h2, h3 (ύψος γραμμής: 1,6em; ) a (χρώμα: #f03; )
Σε αυτά τα στυλ ορίζουμε στρογγυλεμένες γωνίες για το #κεντραρισμένο στοιχείο. Στο CSS3, αυτό θα γίνει από την ιδιότητα border-radius. Αυτό δεν έχει εφαρμοστεί ακόμη σε ορισμένα προγράμματα περιήγησης, εκτός από τη χρήση των προθεμάτων -moz και -webkit για Mozilla Firefox και Safari/Webkit.
ΣυμβατότηταΌπως πιθανώς ήδη μαντέψατε, η κύρια πηγή προβλημάτων συμβατότητας είναι ο Internet Explorer:
- Το στοιχείο #floater πρέπει να έχει ένα σύνολο πλάτους
- Το IE 6 έχει επιπλέον padding γύρω από τα μενού
235882 προβολές
Πολύ συχνά στη διάταξη είναι απαραίτητο να κεντράρετε κάποιο στοιχείο οριζόντια ή/και κάθετα. Ως εκ τούτου, αποφάσισα να φτιάξω ένα άρθρο με διαφορετικούς τρόπους κεντραρίσματος, ώστε όλα να είναι διαθέσιμα σε ένα μέρος.
Περιθώριο οριζόντιας ευθυγράμμισης: αυτόματηΗ οριζόντια στοίχιση με χρήση περιθωρίου χρησιμοποιείται όταν είναι γνωστό το πλάτος του κεντρικού στοιχείου. Λειτουργεί για στοιχεία μπλοκ:
Στοιχείο (περιθώριο-αριστερά: αυτόματο; περιθώριο-δεξιά: αυτόματο; πλάτος: 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: table; :
Οθόνη κάθετης ευθυγράμμισης: πίνακας-κελί .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) )). 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 ( περιθώριο: auto;
Αυτός ο κανόνας κεντράρει το στοιχείο οριζόντια και κατακόρυφα ταυτόχρονα - το περιθώριο λειτουργεί πλέον όχι μόνο για οριζόντια στοίχιση, αλλά και για κάθετη. Και χωρίς γνωστό πλάτος/ύψος.
Σχετικοί πόροι Βοηθήστε το έργοΒλαντ Μέρζεβιτς
Λόγω του γεγονότος ότι τα περιεχόμενα των κελιών του πίνακα μπορούν να ευθυγραμμιστούν ταυτόχρονα οριζόντια και κάθετα, επεκτείνονται οι δυνατότητες ελέγχου της θέσης των στοιχείων μεταξύ τους. Οι πίνακες σάς επιτρέπουν να ορίσετε τη στοίχιση των εικόνων, του κειμένου, των πεδίων φόρμας και άλλων στοιχείων μεταξύ τους και της ιστοσελίδας στο σύνολό της. Γενικά, η ευθυγράμμιση είναι κυρίως απαραίτητη για τη δημιουργία οπτικών συνδέσεων μεταξύ διαφορετικών στοιχείων, καθώς και για την ομαδοποίησή τους.
Κάθετο κεντράρισμαΈνας τρόπος για να δείξετε στον επισκέπτη την εστίαση και το όνομα του ιστότοπου είναι να χρησιμοποιήσετε μια σελίδα splash. Αυτή είναι η πρώτη σελίδα στην οποία, κατά κανόνα, υπάρχει μια οθόνη φλας ή μια εικόνα που εκφράζει την κύρια ιδέα του ιστότοπου. Η εικόνα είναι επίσης ένας σύνδεσμος προς άλλες ενότητες του ιστότοπου. Πρέπει να τοποθετήσετε αυτήν την εικόνα στο κέντρο του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από την ανάλυση της οθόνης. Για το σκοπό αυτό, μπορείτε να χρησιμοποιήσετε ένα τραπέζι με πλάτος και ύψος 100% (παράδειγμα 1).
Παράδειγμα 1: Κεντράρισμα του σχεδίου
ΠΙΝΑΚΑΣ Ευθυγράμμισης ( πλάτος: 100%; /* Πλάτος πίνακα */ ύψος: 100%; /* Ύψος πίνακα */ )
Σε αυτό το παράδειγμα, η οριζόντια στοίχιση ορίζεται χρησιμοποιώντας την παράμετρο ετικέτας align="center".
, και τα περιεχόμενα του κελιού ενδέχεται να μην είναι κεντραρισμένα κατακόρυφα, καθώς αυτή είναι η προεπιλεγμένη θέση. Για να ορίσετε το ύψος του πίνακα στο 100%, πρέπει να αφαιρέσετε το , ο κωδικός δεν θα είναι πλέον έγκυρος.
Η χρήση του πλάτους και του ύψους για την κάλυψη ολόκληρης της διαθέσιμης περιοχής της ιστοσελίδας διασφαλίζει ότι το περιεχόμενο του πίνακα θα ευθυγραμμιστεί ακριβώς στο κέντρο του παραθύρου του προγράμματος περιήγησης, ανεξάρτητα από το μέγεθός του.
Οριζόντια ευθυγράμμισηΣυνδυάζοντας τα χαρακτηριστικά align (οριζόντια στοίχιση) και valign (κάθετη στοίχιση) της ετικέτας
, επιτρέπεται η ρύθμιση πολλών τύπων θέσεων στοιχείων μεταξύ τους. Στο Σχ. Το σχήμα 1 δείχνει τρόπους για την οριζόντια ευθυγράμμιση στοιχείων. Ας δούμε μερικά παραδείγματα στοίχισης κειμένου σύμφωνα με το παρακάτω σχήμα.
Ευθυγράμμιση επάνωΓια να καθορίσετε την επάνω στοίχιση των περιεχομένων κελιών, για μια ετικέτα
πρέπει να ορίσετε το χαρακτηριστικό valign με την τιμή επάνω (παράδειγμα 2). Παράδειγμα 2: Χρήση valign
Ευθυγραμμία
Στήλη 1 Στήλη 2 Σε αυτό το παράδειγμα, τα χαρακτηριστικά κελιών ελέγχονται χρησιμοποιώντας παραμέτρους ετικέτας
, αλλά είναι επίσης πιο βολικό να αλλάζετε μέσα από στυλ. Συγκεκριμένα, η στοίχιση στα κελιά καθορίζεται από τις ιδιότητες κάθετης στοίχισης και στοίχισης κειμένου (παράδειγμα 3). Παράδειγμα 3: Εφαρμογή στυλ για στοίχιση
Πίνακας στοίχισης ( πλάτος: 100%; /* Πλάτος πίνακα */ ) #col1 ( πλάτος: 75%; /* Πλάτος πρώτης στήλης */ φόντο: #f0f0f0; /* Χρώμα φόντου πρώτης στήλης */ ) #col2 ( πλάτος: 25 %; ; / * Στοίχιση επάνω */ padding: 5px /* Περιθώρια γύρω από τα περιεχόμενα των κελιών */ )
Στήλη 1 Στήλη 2 Για να συντομεύσει τον κώδικα, αυτό το παράδειγμα χρησιμοποιεί ομαδοποίηση επιλογέων, επειδή οι ιδιότητες κατακόρυφης στοίχισης και συμπλήρωσης εφαρμόζονται σε δύο κελιά ταυτόχρονα.
Η στοίχιση από κάτω γίνεται με τον ίδιο τρόπο, αλλά αντί για την επάνω τιμή χρησιμοποιείται κάτω.
Στοίχιση στο κέντροΑπό προεπιλογή, τα περιεχόμενα των κελιών ευθυγραμμίζονται στο κέντρο της κάθετης γραμμής τους, επομένως εάν οι στήλες έχουν διαφορετικά ύψη, πρέπει να ορίσετε τη στοίχιση στην επάνω άκρη. Μερικές φορές χρειάζεται ακόμα να αφήσετε την αρχική μέθοδο ευθυγράμμισης, για παράδειγμα, κατά την τοποθέτηση τύπων, όπως φαίνεται στην Εικ. 2.
Σε αυτήν την περίπτωση, ο τύπος βρίσκεται αυστηρά στο κέντρο του παραθύρου του προγράμματος περιήγησης και ο αριθμός του βρίσκεται στη δεξιά άκρη. Για να τακτοποιήσετε τα στοιχεία με αυτόν τον τρόπο, θα χρειαστείτε έναν πίνακα με τρία κελιά. Τα εξωτερικά κελιά πρέπει να έχουν τις ίδιες διαστάσεις, στο μεσαίο κελί η ευθυγράμμιση είναι κεντραρισμένη και στο δεξί κελί - κατά μήκος της δεξιάς άκρης (παράδειγμα 4). Αυτός ο αριθμός κελιών απαιτείται για να διασφαλιστεί ότι ο τύπος είναι τοποθετημένος στο κέντρο.
Παράδειγμα 4: Ευθυγράμμιση τύπου
Ευθυγραμμία
(18.6) Σε αυτό το παράδειγμα, το πρώτο κελί του πίνακα μένει κενό και χρησιμεύει μόνο για τη δημιουργία μιας εσοχής, η οποία, παρεμπιπτόντως, μπορεί επίσης να οριστεί χρησιμοποιώντας στυλ.
Ευθυγράμμιση στοιχείων φόρμαςΧρησιμοποιώντας πίνακες, είναι βολικό να προσδιορίσετε τη θέση των πεδίων φόρμας, ειδικά όταν είναι διάσπαρτα με κείμενο. Μία από τις επιλογές σχεδίασης για τη φόρμα, η οποία προορίζεται για την εισαγωγή ενός σχολίου, φαίνεται στο Σχ. 3.
Για να διασφαλίσετε ότι το κείμενο δίπλα στα πεδία της φόρμας έχει στοίχιση δεξιά και ότι τα ίδια τα στοιχεία της φόρμας έχουν στοίχιση αριστερά, θα χρειαστείτε έναν πίνακα με ένα αόρατο περίγραμμα και δύο στήλες. Η αριστερή στήλη θα περιέχει το ίδιο το κείμενο και η δεξιά στήλη θα περιέχει πεδία κειμένου (παράδειγμα 5).
Παράδειγμα 5: Στοίχιση πεδίων φόρμας
Ευθυγραμμία
Ονομα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Ενα σχόλιο Σε αυτό το παράδειγμα, για τα κελιά όπου απαιτείται η δεξιά στοίχιση, προστίθεται το χαρακτηριστικό align="right". Για να διασφαλιστεί ότι η ετικέτα σχολίου είναι τοποθετημένη στην κορυφή του κειμένου πολλών γραμμών, το αντίστοιχο κελί ρυθμίζεται σε ευθυγράμμιση επάνω χρησιμοποιώντας το χαρακτηριστικό valign.
Πόσα αντίγραφα έχουν ήδη σπάσει σχετικά με την εργασία στοίχισης στοιχείων σε μια σελίδα. Φέρνω στην προσοχή σας μια μετάφραση ενός εξαιρετικού άρθρου με λύση σε αυτό το πρόβλημα από τον Stephen Shaw για το Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.
Όλοι γνωρίζαμε για το περιθώριο: 0 auto; για οριζόντιο κεντράρισμα, αλλά περιθώριο: auto; δεν λειτούργησε για κάθετη. Αυτό μπορεί εύκολα να διορθωθεί ρυθμίζοντας απλώς το ύψος και εφαρμόζοντας τα ακόλουθα στυλ:
Απόλυτο-Κέντρο ( περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )
Δεν είμαι ο πρώτος που προτείνει αυτή τη λύση, αλλά αυτή η προσέγγιση χρησιμοποιείται σπάνια για κάθετη ευθυγράμμιση. Στα σχόλια του άρθρου Πώς να κεντράρετε οτιδήποτε με CSS, ο Simon συνδέεται με ένα παράδειγμα jsFiddle που παρέχει μια εξαιρετική λύση για κάθετο κεντράρισμα. Εδώ είναι μερικά περισσότερα σχετικά με αυτό το θέμα.Ας ρίξουμε μια πιο προσεκτική ματιά στη μέθοδο.
Πλεονεκτήματα- Συμβατότητα μεταξύ προγραμμάτων περιήγησης (συμπεριλαμβανομένου του IE 8-10)
- Χωρίς πρόσθετη σήμανση, ελάχιστο στυλ
- Ικανότητα προσαρμογής
- Ανεξαρτησία από το γέμισμα (χωρίς μέγεθος κουτιού!)
- Λειτουργεί για εικόνες
- Το ύψος πρέπει να καθοριστεί (δείτε Μεταβλητό ύψος)
- Συνιστάται να ρυθμίσετε την υπερχείλιση: αυτόματη για να μην απλώνεται το περιεχόμενο
- Δεν λειτουργεί σε Windows Phone
Απόλυτο-Κέντρο (πλάτος: 50%; ύψος: 50%, υπερχείλιση: αυτόματη; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )
Χρήση θύρας προβολής Ρυθμίστε το περιεχόμενο στη θέση: σταθερό και ορίστε το δείκτη z:Absolute-Center.is-Fixed (πλάτος: 50%; ύψος: 50%; υπερχείλιση: αυτόματο; περιθώριο: αυτόματο; θέση: σταθερό; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; δείκτης z: 999;
Προσαρμοστικότητα Το κύριο πλεονέκτημα της περιγραφόμενης μεθόδου είναι ότι λειτουργεί άψογα όταν το ύψος ή το πλάτος καθορίζεται ως ποσοστό, και ακόμη κατανοεί το ελάχιστο πλάτος/μέγιστο πλάτος και το ελάχιστο ύψος/μέγιστο ύψος .Absolute-Center.is-Responsive (πλάτος: 60%; ύψος: 60%, ελάχ. πλάτος: 400 εικονοστοιχεία; μέγ. πλάτος: 500 εικονοστοιχεία; γέμιση: 40 εικονοστοιχεία; υπερχείλιση: αυτόματη; περιθώριο: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0;
Μετατόπιση Εάν ο ιστότοπος έχει μια σταθερή κεφαλίδα ή πρέπει να κάνετε κάποια άλλη εσοχή, πρέπει απλώς να προσθέσετε κώδικα όπως πάνω: 70 px στα στυλ. Ενώ έχει οριστεί το περιθώριο: auto; το μπλοκ περιεχομένου θα είναι σωστά κεντραρισμένο σε ύψος.
Μπορείτε επίσης να ευθυγραμμίσετε το περιεχόμενο στην επιθυμητή πλευρά, αφήνοντας το κέντρο σε ύψος. Για να το κάνετε αυτό πρέπει να χρησιμοποιήσετε δεξιά: 0; αριστερά: auto; για δεξιά ή αριστερή στοίχιση: 0; δεξιά: auto; για αριστερή ευθυγράμμιση.
Absolute-Center.is-Right ( πλάτος: 50%; ύψος: 50%, περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: αυτόματη; κάτω: 0; δεξιά: 20 εικονοστοιχεία; στοίχιση κειμένου: σωστά;
Μεγάλο περιεχόμενο Για να διασφαλίσουμε ότι ένας μεγάλος όγκος περιεχομένου δεν επιτρέπει την απόκλιση της διάταξης, χρησιμοποιούμε υπερχείλιση: αυτόματη . Θα εμφανιστεί μια κάθετη γραμμή κύλισης. Μπορείτε επίσης να προσθέσετε μέγιστο ύψος: 100%; εάν το περιεχόμενο δεν έχει πρόσθετη επένδυση.
.Absolute-Center.is-Overflow ( πλάτος: 50%; ύψος: 300 εικονοστοιχεία; μέγ. ύψος: 100%; περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά : 0;
Εικόνες Αυτή η μέθοδος λειτουργεί εξαιρετικά και για εικόνες! Προσθήκη ύψους στυλ: auto; τότε η εικόνα θα κλιμακωθεί μαζί με το κοντέινερ. Absolute-Center.is-Image (πλάτος: 50%; ύψος: αυτόματο; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 0; αριστερά: 0; κάτω: 0; δεξιά: 0; )
Μεταβλητό ύψος Η περιγραφόμενη μέθοδος απαιτεί ένα δεδομένο ύψος μπλοκ, το οποίο μπορεί να καθοριστεί ως ποσοστό και να ελεγχθεί χρησιμοποιώντας μέγιστο ύψος, γεγονός που καθιστά τη μέθοδο ιδανική για αποκριτικές τοποθεσίες. Ένας τρόπος για να μην ορίσετε το ύψος είναι να χρησιμοποιήσετε την οθόνη: πίνακας . Σε αυτήν την περίπτωση, το μπλοκ περιεχομένου είναι κεντραρισμένο ανεξάρτητα από το μέγεθος.
Ενδέχεται να υπάρχουν προβλήματα με τη συμβατότητα μεταξύ προγραμμάτων περιήγησης, ίσως θα πρέπει να χρησιμοποιήσετε τη μέθοδο κελιών πίνακα (περιγράφεται παρακάτω).
- Firefox/IE8: Χρήση οθόνης: ο πίνακας ευθυγραμμίζει το μπλοκ κατακόρυφα στην κορυφή του εγγράφου.
- IE9/10: Χρήση οθόνης: ο πίνακας ευθυγραμμίζει το μπλοκ στην επάνω αριστερή γωνία της σελίδας.
- Mobile Safari: Εάν το πλάτος έχει οριστεί σε ποσοστό, το οριζόντιο κεντράρισμα υποφέρει
Άλλες μέθοδοι Η περιγραφόμενη μέθοδος λειτουργεί εξαιρετικά στις περισσότερες περιπτώσεις, αλλά υπάρχουν και άλλες μέθοδοι που μπορούν να χρησιμοποιηθούν για την επίλυση συγκεκριμένων προβλημάτων. Αρνητικό περιθώριο Ίσως η πιο δημοφιλής μέθοδος. Κατάλληλο εάν είναι γνωστές οι διαστάσεις του μπλοκ. Είναι Αρνητικό ( πλάτος: 300 εικονοστοιχεία, ύψος: 200 εικονοστοιχεία, επένδυση: 20 εικονοστοιχεία, θέση: απόλυτη, επάνω: 50%, αριστερά: 50%, περιθώριο-αριστερά: -170 εικονοστοιχεία; /* (πλάτος + γέμιση)/2 */ περιθώριο- κορυφή: -120 px /* (ύψος + γέμιση)/2 */ )
Πλεονεκτήματα:- Συμβατότητα μεταξύ προγραμμάτων περιήγησης
- Ελάχιστος κωδικός
- Μη προσαρμοστικό
- Η διάταξη σέρνεται αν υπάρχει πολύ περιεχόμενο στο δοχείο
- Πρέπει να αντισταθμίσετε το padding ή να χρησιμοποιήσετε το box-sizing: border-box
Is-Transformed (πλάτος: 50%; περιθώριο: αυτόματο; θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%);
Πλεονεκτήματα:- Μεταβλητό ύψος
- Ελάχιστος κωδικός
- Δεν λειτουργεί στον IE 8
- Χρήση προθεμάτων
- Μπορεί να επηρεάσει άλλα εφέ μετασχηματισμού
- Σε ορισμένες περιπτώσεις, οι άκρες του μπλοκ και το κείμενο είναι θολά κατά την απόδοση
<!-- ΠΕΡΙΕΧΟΜΕΝΟ -->
CSS:
.Pos-Container.is-Table ( εμφάνιση: πίνακας; ) .is-Table .Table-Cell ( εμφάνιση: πίνακας-κελί; κατακόρυφη στοίχιση: μέση; ) .is-Table .Center-Block ( πλάτος: 50%; περιθώριο: 0 αυτόματο;
Πλεονεκτήματα:- Μεταβλητό ύψος
- Η διάταξη δεν λειτουργεί όταν υπάρχει μεγάλος όγκος κειμένου σε ένα μπλοκ
- Συμβατότητα μεταξύ προγραμμάτων περιήγησης
- Σύνθετη δομή
Pos-Container.is-Flexbox ( οθόνη: -webkit-box; εμφάνιση: -moz-box; εμφάνιση: -ms-flexbox; εμφάνιση: -webkit-flex; εμφάνιση: flex; -webkit-box-align: κέντρο; - moz-box-align: -ms-flex-align: -webkit-align-items: -webkit-box-pack: -ms-flex-content; : κέντρο;
Πλεονεκτήματα:- Το περιεχόμενο μπορεί να έχει οποιοδήποτε ύψος ή πλάτος
- Μπορεί να χρησιμοποιηθεί σε πιο περίπλοκες περιπτώσεις
- Δεν υπάρχει υποστήριξη για τον IE 8-9
- Απαιτεί δοχείο ή στυλ στο σώμα
- Απαιτεί μεγάλη ποικιλία προθεμάτων για να λειτουργήσει σωστά στα σύγχρονα προγράμματα περιήγησης
- Πιθανά προβλήματα απόδοσης
Η κάθετη στοίχιση κειμένου σε CSS είναι μια αρκετά δύσκολη δουλειά. Έχω δει αρκετούς ανθρώπους να παλεύουν με αυτό και συνεχίζω να βρίσκω "κρίσιμα" σφάλματα όσον αφορά τον πραγματικό σχεδιασμό με απόκριση.
Αλλά μην φοβάστε: εάν ήδη δυσκολεύεστε με την κάθετη ευθυγράμμιση CSS, έχετε έρθει στο σωστό μέρος.
Ας μιλήσουμε για την ιδιότητα κάθετης στοίχισης CSSΌταν άρχισα να εργάζομαι για πρώτη φορά στην ανάπτυξη ιστού, δυσκολεύτηκα λίγο με αυτήν την ιδιότητα. Σκέφτηκα ότι θα έπρεπε να λειτουργεί όπως η κλασική ιδιότητα "text-align". Αχ, να ήταν όλα τόσο απλά...
Η ιδιότητα CSS κάθετης στοίχισης λειτουργεί καλά με πίνακες, αλλά όχι με div ή άλλα στοιχεία. Όταν το χρησιμοποιείτε σε ένα div, ευθυγραμμίζει το στοιχείο σε σχέση με άλλα div, αλλά όχι το περιεχόμενό του. Σε αυτήν την περίπτωση, η ιδιότητα λειτουργεί μόνο με οθόνη: inline-block; .
Δείτε παράδειγμα
Θέλουμε να κεντράρουμε το περιεχόμενο, όχι το ίδιο το div!Έχετε δύο επιλογές. Εάν έχετε μόνο στοιχεία div με κείμενο, τότε μπορείτε να χρησιμοποιήσετε την ιδιότητα line-height. Αυτό σημαίνει ότι πρέπει να γνωρίζετε το ύψος του στοιχείου, αλλά δεν μπορείτε να το ορίσετε. Με αυτόν τον τρόπο το κείμενό σας θα βρίσκεται πάντα στο κέντρο.
Ωστόσο, υπάρχει ένα μειονέκτημα σε αυτή την προσέγγιση κάθετης ευθυγράμμισης CSS. Εάν το κείμενο είναι πολλαπλών γραμμών, τότε το ύψος της γραμμής θα πολλαπλασιαστεί με τον αριθμό των γραμμών. Πιθανότατα, σε αυτή την περίπτωση, θα καταλήξετε σε μια τρομερά στρωμένη σελίδα.
Ρίξτε μια ματιά σε αυτό το παράδειγμα
Εάν το περιεχόμενο που θέλετε να κεντράρετε αποτελείται από περισσότερες από μία γραμμές, τότε είναι προτιμότερο να χρησιμοποιήσετε divs πίνακα. Μπορείτε επίσης να χρησιμοποιήσετε πίνακες, αλλά αυτό δεν είναι σημασιολογικά σωστό. Εάν χρειάζεστε διαλείμματα για λόγους απόκρισης, είναι καλύτερα να χρησιμοποιήσετε στοιχεία div.
Για να λειτουργήσει αυτό, πρέπει να υπάρχει ένα γονικό κοντέινερ με οθόνη: πίνακας και μέσα σε αυτό τον επιθυμητό αριθμό στηλών που θέλετε να κεντράρετε χρησιμοποιώντας την οθόνη: πίνακας-κελί και κατακόρυφη στοίχιση: μέση .
Δείτε παράδειγμα
Γιατί αυτό λειτουργεί με τη σήμανση πίνακα αλλά όχι με στοιχεία div; Επειδή οι σειρές στον πίνακα έχουν το ίδιο ύψος. Όταν το περιεχόμενο ενός κελιού πίνακα δεν χρησιμοποιεί όλο τον διαθέσιμο χώρο ύψους, το πρόγραμμα περιήγησης προσθέτει αυτόματα κάθετη γέμιση για να κεντράρει το περιεχόμενο.
ιδιότητα θέσηςΑς ξεκινήσουμε με τα βασικά της κάθετης στοίχισης CSS div:
- θέση: η στατική είναι η προεπιλογή. Το στοιχείο αποδίδεται σύμφωνα με τη σειρά HTML.
- θέση: απόλυτη - χρησιμοποιείται για τον προσδιορισμό της ακριβούς θέσης ενός στοιχείου. Αυτή η θέση σχετίζεται πάντα με το πλησιέστερο σχετικά τοποθετημένο γονικό στοιχείο (όχι στατικό ). Εάν δεν προσδιορίσετε την ακριβή θέση ενός στοιχείου, θα χάσετε τον έλεγχό του. Θα εμφανιστεί τυχαία, αγνοώντας εντελώς τη ροή του εγγράφου. Από προεπιλογή, το στοιχείο εμφανίζεται στην επάνω αριστερή γωνία.
- θέση: σχετική - χρησιμοποιείται για την τοποθέτηση ενός στοιχείου σε σχέση με την κανονική του θέση (στατική). Αυτή η τιμή διατηρεί τη σειρά ροής εγγράφων.
- θέση: σταθερή - χρησιμοποιείται για την τοποθέτηση του στοιχείου σε σχέση με το παράθυρο του προγράμματος περιήγησης, ώστε να είναι πάντα ορατό στη θύρα προβολής.
Σημείωση: Ορισμένες ιδιότητες (επάνω και δείκτης z) λειτουργούν μόνο εάν το στοιχείο έχει ρυθμιστεί στη θέση (όχι στατικό ).
Ας ξεκινήσουμε δουλειά!Θέλετε να εφαρμόσετε την κάθετη στοίχιση στο κέντρο του CSS; Αρχικά δημιουργήστε ένα στοιχείο με σχετική θέση και διαστάσεις. Για παράδειγμα: 100% σε πλάτος και ύψος.
Το δεύτερο βήμα μπορεί να διαφέρει ανάλογα με τα προγράμματα περιήγησης-στόχου, αλλά μπορείτε να χρησιμοποιήσετε μία από τις δύο επιλογές:
- Παλιά ιδιότητα: πρέπει να γνωρίζετε το ακριβές μέγεθος του παραθύρου για να αφαιρέσετε το μισό πλάτος και το μισό ύψος. Κοιτάξτε το παράδειγμα.
- Νέα ιδιότητα CSS3: μπορείτε να προσθέσετε μια ιδιότητα μετασχηματισμού με τιμή μετάφρασης 50% και το μπλοκ θα βρίσκεται πάντα στο κέντρο. Δείτε το παράδειγμα.
Βασικά, αν θέλετε να κεντράρετε περιεχόμενο, μην χρησιμοποιείτε ποτέ επάνω: 40% ή αριστερά: 300 εικονοστοιχεία . Αυτό λειτουργεί καλά στις δοκιμαστικές οθόνες, αλλά δεν είναι κεντραρισμένο.
Θυμηθείτε θέση: σταθερή ; Μπορείτε να κάνετε το ίδιο πράγμα με αυτό με μια απόλυτη θέση, αλλά δεν χρειάζεστε μια σχετική θέση για το γονικό στοιχείο - θα βρίσκεται πάντα σε σχέση με το παράθυρο του προγράμματος περιήγησης.
Έχετε ακούσει για τις προδιαγραφές flexbox;Μπορείτε να χρησιμοποιήσετε το flexbox. Αυτό είναι πολύ καλύτερο από οποιαδήποτε άλλη επιλογή CSS κάθετης στοίχισης κειμένου στο κέντρο. Με το flexbox, η διαχείριση στοιχείων μοιάζει με παιδικό παιχνίδι. Το πρόβλημα είναι ότι πρέπει να απορρίψετε ορισμένα προγράμματα περιήγησης όπως το IE9 και τις παρακάτω εκδόσεις. Ακολουθεί ένα παράδειγμα για το πώς να κεντράρετε κάθετα ένα μπλοκ:
Δείτε το παράδειγμα
Χρησιμοποιώντας μια διάταξη flexbox, μπορείτε να κεντράρετε πολλά μπλοκ.
Εάν εφαρμόσετε όσα μάθατε από αυτά τα παραδείγματα, θα μπορείτε να κατακτήσετε την κάθετη στοίχιση μπλοκ CSS σε χρόνο μηδέν.
Σύνδεσμοι και περαιτέρω ανάγνωσηΕκμάθηση σήμανσης CSS
FlexBox Froggy
Flexbox sandbox
Η μετάφραση του άρθρου «CSS Vertical Align for Everyone (Dummies Included)» ετοιμάστηκε από τη φιλική ομάδα του έργου.
- #πλευρά
