Στοίχιση στο κέντρο των μπλοκ css. Απόλυτη τοποθέτηση και αρνητικά περιθώρια. Για να ευθυγραμμίσετε κάθετα ένα μπλοκ μέσα σε ένα γονικό μπλοκ
Κατά τη διάταξη μιας σελίδας, είναι συχνά απαραίτητο να πραγματοποιήσετε στοίχιση στο κέντρο χρησιμοποιώντας τη μέθοδο CSS: για παράδειγμα, κεντράρισμα του κύριου μπλοκ. Υπάρχουν πολλές επιλογές για την επίλυση αυτού του προβλήματος, καθεμία από τις οποίες αργά ή γρήγορα πρέπει να χρησιμοποιηθεί από οποιονδήποτε σχεδιαστή διάταξης.
Στοίχιση κειμένου στο κέντρο
Συχνά, για διακοσμητικούς σκοπούς, είναι απαραίτητο να ρυθμίσετε το κείμενο στη στοίχιση στο κέντρο, σε αυτήν την περίπτωση, μπορείτε να μειώσετε το χρόνο διάταξης. Προηγουμένως, αυτό γινόταν χρησιμοποιώντας χαρακτηριστικά HTML, αλλά τώρα το πρότυπο απαιτεί τη στοίχιση του κειμένου χρησιμοποιώντας φύλλα στυλ. Σε αντίθεση με τα μπλοκ, για τα οποία πρέπει να αλλάξετε τα περιθώρια, σε Ευθυγράμμιση CSSΤο κεντράρισμα του κειμένου γίνεται χρησιμοποιώντας μία γραμμή:
- text-align:center;
Αυτή η ιδιότητα κληρονομείται και μεταβιβάζεται από τον γονέα σε όλους τους απογόνους. Επηρεάζει όχι μόνο το κείμενο, αλλά και άλλα στοιχεία. Για να γίνει αυτό, πρέπει να είναι inline (για παράδειγμα, span) ή inline-block (οποιαδήποτε μπλοκ που δίνονται εμφάνιση ιδιότητας: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ). Η τελευταία επιλογή σάς επιτρέπει επίσης να αλλάξετε το πλάτος και το ύψος του στοιχείου και να προσαρμόσετε τις εσοχές πιο ευέλικτα.
Συχνά στις σελίδες, η στοίχιση εκχωρείται στην ίδια την ετικέτα. Αυτό ακυρώνει αμέσως τον κώδικα, καθώς το W3C έχει καταργήσει το χαρακτηριστικό align. Η χρήση του σε μια σελίδα δεν συνιστάται.
Ευθυγράμμιση ενός μπλοκ στο κέντρο
Εάν χρειάζεται να ρυθμίσετε div στοίχισηστο κέντρο, το CSS έχει πολλά να προσφέρει βολικό τρόπο: χρησιμοποιήστε εξωτερικά περιθώρια. Οι εσοχές μπορούν να οριστούν τόσο για στοιχεία μπλοκ όσο και για στοιχεία ενσωματωμένου μπλοκ. Η τιμή της ιδιότητας πρέπει να είναι 0 (κάθετη συμπλήρωση) και αυτόματη (αυτόματη οριζόντια συμπλήρωση):
- περιθώριο: 0 αυτόματο;
Τώρα αυτή η επιλογή αναγνωρίζεται ως απολύτως έγκυρη. Η χρήση εξωτερικής συμπλήρωσης σάς επιτρέπει επίσης να ρυθμίσετε την εικόνα στο κέντρο: σας επιτρέπει να λύσετε πολλά προβλήματα που σχετίζονται με την τοποθέτηση ενός στοιχείου στη σελίδα.
Ευθυγραμμίστε ένα μπλοκ αριστερά ή δεξιά
Μερικές φορές δεν απαιτείται στοίχιση στο κέντρο του CSS, αλλά πρέπει να τοποθετήσετε δύο μπλοκ δίπλα-δίπλα: το ένα στην αριστερή άκρη και το άλλο στη δεξιά. Για αυτό υπάρχει float ακίνητο, το οποίο μπορεί να λάβει μία από τις τρεις τιμές: αριστερά, δεξιά ή καμία. Ας υποθέσουμε ότι έχετε δύο μπλοκ που πρέπει να τοποθετηθούν δίπλα-δίπλα. Τότε ο κώδικας θα είναι ως εξής:
- .left (float:left;)
- .right(float:right)
Εάν υπάρχει επίσης ένα τρίτο μπλοκ, το οποίο θα πρέπει να βρίσκεται κάτω από τα δύο πρώτα μπλοκ (για παράδειγμα, ένα υποσέλιδο), τότε πρέπει να του δοθεί η καθαρή ιδιότητα:
- .left (float:left;)
- .right(float:right)
- υποσέλιδο (καθαρό:και τα δύο)
Γεγονός είναι ότι τα μπλοκ με τις κλάσεις αριστερά και δεξιά πέφτουν εκτός της γενικής ροής, δηλαδή όλα τα άλλα στοιχεία αγνοούν την ίδια την ύπαρξη ευθυγραμμισμένων στοιχείων. Η ιδιότητα clear:both επιτρέπει στο υποσέλιδο ή σε οποιοδήποτε άλλο μπλοκ να βλέπει στοιχεία που έχουν πέσει εκτός ροής και απαγορεύει την αιώρηση τόσο στα αριστερά όσο και στα δεξιά. Επομένως, στο παράδειγμά μας, το υποσέλιδο θα μετακινηθεί προς τα κάτω.
Κατακόρυφη στοίχιση
Υπάρχουν φορές που δεν αρκεί να ορίσετε τη στοίχιση στο κέντρο χρησιμοποιώντας μεθόδους CSS, πρέπει επίσης να αλλάξετε κάθετη θέσηπαιδικό μπλοκ. Οποιοδήποτε ενσωματωμένο ή ενσωματωμένο στοιχείο μπλοκ μπορεί να είναι ένθετο στο επάνω ή στο κάτω άκρο, στη μέση ενός γονικού στοιχείου ή σε οποιαδήποτε θέση. Τις περισσότερες φορές, το μπλοκ πρέπει να ευθυγραμμιστεί στο κέντρο για αυτό, χρησιμοποιείται το χαρακτηριστικό κάθετης στοίχισης. Ας πούμε ότι υπάρχουν δύο μπλοκ, το ένα φωλιασμένο μέσα στο άλλο. Εν εσωτερική μονάδα— στοιχείο inline-block (οθόνη: inline-block). Πρέπει να ευθυγραμμίσετε κάθετα το μπλοκ παιδιού:
- επάνω στοίχιση - .child(vertical-align:top);
- στοίχιση στο κέντρο - .child(vertical-align:middle);
- κάτω στοίχιση - .child(vertical-align:bottom);
Ούτε η στοίχιση κειμένου ούτε η κάθετη στοίχιση επηρεάζουν τα στοιχεία μπλοκ.
Πιθανά προβλήματα με ευθυγραμμισμένα μπλοκ
Μερικές φορές το κεντράρισμα ενός div χρησιμοποιώντας CSS μπορεί να προκαλέσει λίγο πρόβλημα. Για παράδειγμα, όταν χρησιμοποιείτε float: ας πούμε ότι υπάρχουν τρία μπλοκ: .first, .second και .third. Το δεύτερο και το τρίτο μπλοκ βρίσκονται στο πρώτο. Το στοιχείο με κλάση δεύτερη είναι στοίχιση αριστερά και το τελευταίο μπλοκ είναι δεξιά. Μετά την ισοπέδωση, και οι δύο έπεσαν από τη ροή. Εάν το γονικό στοιχείο δεν έχει καθορισμένο ύψος (για παράδειγμα, 30em), τότε δεν θα τεντώνεται πλέον στο ύψος των θυγατρικών του μπλοκ. Για να αποφύγετε αυτό το σφάλμα, χρησιμοποιήστε ένα "spacer" - ένα ειδικό μπλοκ που βλέπει .second και .third. Κωδικός CSS:
- .second(float:αριστερά)
- .third (float:right)
- .clearfix(ύψος:0; καθαρό: και τα δύο;)
Η ψευδοκλάση:after χρησιμοποιείται συχνά, η οποία σας επιτρέπει επίσης να επιστρέψετε τα μπλοκ στη θέση τους δημιουργώντας ένα ψευδο-διαχωριστή (στο παράδειγμα, ένα div με την κλάση κοντέινερ βρίσκεται inside.first και περιέχει.left και.right) :
- .left(float:αριστερά)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Οι παραπάνω επιλογές είναι οι πιο συνηθισμένες, αν και υπάρχουν αρκετές παραλλαγές. Μπορείτε πάντα να βρείτε τον απλούστερο και πιο βολικό τρόπο για να δημιουργήσετε έναν ψευδο-διαχωριστή μέσω πειραματισμού.
Ένα άλλο πρόβλημα που αντιμετωπίζουν συχνά οι σχεδιαστές διάταξης είναι η ευθυγράμμιση γραμμών. στοιχεία μπλοκ. Ένα κενό προστίθεται αυτόματα μετά από καθένα από αυτά. Βοηθά στην αντιμετώπιση αυτού ιδιοκτησία περιθωρίου, στο οποίο δίνεται αρνητικό περιθώριο. Υπάρχουν και άλλες μέθοδοι που χρησιμοποιούνται πολύ λιγότερο συχνά: για παράδειγμα, μηδενισμός Σε αυτήν την περίπτωση, το μέγεθος γραμματοσειράς: 0 γράφεται στις ιδιότητες του γονικού στοιχείου. Αν υπάρχει κείμενο μέσα στα μπλοκ, τότε στις ιδιότητες ενσωματωμένα στοιχεία μπλοκεπιστρέφει ήδη σωστό μέγεθοςγραμματοσειρά. Για παράδειγμα, μέγεθος γραμματοσειράς: 1em. Αυτή η μέθοδος δεν είναι πάντα βολική, επομένως η επιλογή με εξωτερικές εσοχές χρησιμοποιείται πολύ πιο συχνά.
Η ευθυγράμμιση μπλοκ σάς επιτρέπει να δημιουργείτε όμορφες και λειτουργικές σελίδες: αυτό περιλαμβάνει τη διάταξη της συνολικής διάταξης, τη διάταξη των προϊόντων σε ηλεκτρονικά καταστήματα και φωτογραφίες σε έναν ιστότοπο επαγγελματικών καρτών.
Πολύ συχνά η εργασία είναι η ευθυγράμμιση ενός μπλοκ στο κέντρο της σελίδας/οθόνης, ακόμα και έτσι ώστε χωρίς σενάριο Java, χωρίς εργασία άκαμπτα μεγέθηή αρνητικές εσοχές, έτσι ώστε οι γραμμές κύλισης να λειτουργούν και για τον γονέα εάν το μπλοκ υπερβαίνει το μέγεθός του. Υπάρχουν πολλά μονότονα παραδείγματα στο Διαδίκτυο σχετικά με τον τρόπο ευθυγράμμισης ενός μπλοκ στο κέντρο της οθόνης. Κατά κανόνα, τα περισσότερα από αυτά βασίζονται στις ίδιες αρχές.
Παρακάτω είναι οι κύριοι τρόποι επίλυσης του προβλήματος, τα πλεονεκτήματα και τα μειονεκτήματά τους. Για να κατανοήσετε την ουσία των παραδειγμάτων, προτείνω να μειώσετε το ύψος/πλάτος του παραθύρου Αποτέλεσμα στα παραδείγματα στους συνδέσμους που παρέχονται.
Επιλογή 1: Αρνητική εσοχή.
Τοποθέτηση ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟχαρακτηριστικά πάνω και αριστερά κατά 50%, και γνωρίζοντας εκ των προτέρων το ύψος και το πλάτος του μπλοκ, ορίσαμε αρνητικό περιθώριο, που έχει το μισό μέγεθος ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Ένα τεράστιο μείον αυτή την επιλογήείναι ότι πρέπει να μετρήσετε αρνητικά padding. Επίσης ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν συμπεριφέρεται αρκετά σωστά όταν περιβάλλεται από γραμμές κύλισης - απλώς κόβεται επειδή έχει αρνητικά περιθώρια.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτο; επάνω: 50%, αριστερά : 50%; περιθώριο: -125px 0 0 -125px (μέγιστο πλάτος: 100%; ύψος: αυτόματη; εμφάνιση: μπλοκ; περιθώριο: κανένα; )
Επιλογή 2. Αυτόματη εσοχή.
Λιγότερο κοινό, αλλά παρόμοιο με το πρώτο. Για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟορίστε το πλάτος και το ύψος, τη θέση με τα κορυφαία χαρακτηριστικά δεξιά κάτωαριστερά στο 0 και ορίστε αυτόματα το περιθώριο. Το πλεονέκτημα αυτής της επιλογής είναι οι λειτουργικές γραμμές κύλισης μητρική εταιρεία, εάν το τελευταίο έχει 100% πλάτος και ύψος. Το μειονέκτημα αυτής της μεθόδου είναι η άκαμπτη ρύθμιση των διαστάσεων.
Γονικό ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτη; επάνω: 0; δεξιά: 0, κάτω: 0, περιθώριο: αυτόματο img
Επιλογή 3. Πίνακας.
Ας ρωτήσουμε μητρική εταιρείαστυλ πίνακα, κελί μητρική εταιρείαΡυθμίστε τη στοίχιση κειμένου στο κέντρο. ΕΝΑ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟορίστε το μοντέλο μπλοκ γραμμής. Τα μειονεκτήματα που έχουμε είναι οι μη λειτουργικές γραμμές κύλισης και γενικά η αισθητική της «εξομοίωσης» του πίνακα δεν είναι.
Γονικός ( πλάτος: 100%; ύψος: 100%, εμφάνιση: πίνακας; θέση: απόλυτη; επάνω: 0; αριστερά: 0; > .inner ( οθόνη: πίνακας-κελί; στοίχιση κειμένου: κέντρο; κατακόρυφη στοίχιση: μέση; ) ) .block ( display: inline-block; img ( display: block; περίγραμμα: κανένα; ) )
Για να προσθέσετε μια κύλιση σε αυτό το παράδειγμα, θα πρέπει να προσθέσετε ένα ακόμη στοιχείο στο σχέδιο.
Παράδειγμα: jsfiddle.net/serdidg/fk5nqh52/3.
Επιλογή 4. Ψευδοστοιχείο.
Αυτή η επιλογή είναι απαλλαγμένη από όλα τα προβλήματα που αναφέρονται προηγούμενες μεθόδους, και επιλύει επίσης τις εργασίες που είχαν οριστεί αρχικά. Το θέμα είναι ότι μητρική εταιρείασετ στυλ ψευδοστοιχείοπριν, δηλαδή 100% ύψος, ευθυγράμμιση στο κέντρο και ενσωματωμένο μοντέλο μπλοκ. είναι το ίδιο με ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟτοποθετείται ένα μοντέλο μπλοκ γραμμής, στο κέντρο. Προς την ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν «έπεσε» από κάτω ψευδοστοιχείο, όταν οι διαστάσεις του πρώτου είναι μεγαλύτερες από μητρική εταιρεία, υποδεικνύω μητρική εταιρείαλευκό διάστημα: nowrap και μέγεθος γραμματοσειράς: 0, μετά το οποίο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟακυρώστε αυτά τα στυλ με το εξής - κενό διάστημα: κανονικό. ΣΕ σε αυτό το παράδειγμαμέγεθος γραμματοσειράς: 0 απαιτείται για να αφαιρέσετε το κενό που προκύπτει μεταξύ μητρική εταιρείαΚαι ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟλόγω μορφοποίησης κώδικα. Ο χώρος μπορεί να αφαιρεθεί με άλλους τρόπους, αλλά θεωρείται καλύτερο να τον αποφύγετε.
Γονικός (πλάτος: 100%; ύψος: 100%, θέση: απόλυτο; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; κενό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν ( ύψος: 100% οθόνη: κάθετη στοίχιση: ""εμφάνιση: κανένα;
Ή, εάν χρειάζεται ο γονέας να καταλαμβάνει μόνο το ύψος και το πλάτος του παραθύρου και όχι ολόκληρη τη σελίδα:
Γονικός (θέση: σταθερό; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; υπερχείλιση: αυτόματο; κενό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν (ύψος: 100% εμφάνιση: κατακόρυφη στοίχιση: "" (εμφάνιση: κανένα;)
Επιλογή 5. Flexbox.
Ένας από τους απλούστερους και πιο κομψούς τρόπους είναι να χρησιμοποιήσετε το flexbox. Δεν απαιτεί περιττές κινήσεις του σώματος, περιγράφει ξεκάθαρα την ουσία αυτού που συμβαίνει και είναι ιδιαίτερα ευέλικτο. Το μόνο πράγμα που αξίζει να θυμάστε κατά την επιλογή αυτή τη μέθοδο- υποστήριξη για IE από την έκδοση 10 συμπεριλαμβανομένης. caniuse.com/#feat=flexbox
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; οθόνη: flex; στοίχιση-στοιχεία: κέντρο; στοίχιση-περιεχόμενο: κέντρο; δικαιολογία-περιεχόμενο: κέντρο; υπερχείλιση: αυτόματη; ) .block ( φόντο: #60a839; img ( εμφάνιση: μπλοκ; περίγραμμα: κανένα; ) )
Επιλογή 6. Μετασχηματισμός.
Κατάλληλο αν περιοριζόμαστε από τη δομή και δεν υπάρχει τρόπος χειραγώγησης γονικό στοιχείο, αλλά το μπλοκ πρέπει να ευθυγραμμιστεί με κάποιο τρόπο. θα έρθει στη διάσωση συνάρτηση cssμεταφράζω() . Μια τιμή 50% απόλυτης τοποθέτησης θα τοποθετήσει την επάνω αριστερή γωνία του μπλοκ ακριβώς στο κέντρο και, στη συνέχεια, μια αρνητική τιμή μετάφρασης θα μετακινήσει το μπλοκ σε σχέση με τις δικές του διαστάσεις. Λάβετε υπόψη ότι ενδέχεται να επιπλέουν αρνητικές επιπτώσειςμε τη μορφή θολών άκρων ή στυλ γραμματοσειράς. Επίσης παρόμοια μέθοδοςμπορεί να οδηγήσει σε προβλήματα με τον υπολογισμό της θέσης του μπλοκ χρησιμοποιώντας java-script Μερικές φορές για να αντισταθμίσει την απώλεια του 50% του πλάτους λόγω χρησιμοποιώντας css άφησε ακίνηταΟ κανόνας που καθορίζεται για το μπλοκ μπορεί να βοηθήσει: margin-right: -50%; .
Γονικό (πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block (θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; μετατροπή: μετάφραση( -50%, -50%) img (εμφάνιση: μπλοκ; ) )
Επιλογή 7. Κουμπί.
Επιλογή azproduction χρήστη όπου ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟπλαισιωμένο σε μια ετικέτα κουμπιού. Το κουμπί έχει την ιδιότητα να κεντράρει όλα όσα βρίσκονται μέσα του, δηλαδή τα στοιχεία του μοντέλου inline και block-line (inline-block). Στην πράξη δεν συνιστώ τη χρήση του.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; φόντο: κανένα; περίγραμμα: κανένα; περίγραμμα: κανένα; ) .block ( οθόνη: ενσωματωμένο μπλοκ; img (εμφάνιση: μπλοκ;; περίγραμμα: κανένα; ) )
Δώρο
Χρησιμοποιώντας την ιδέα της 4ης επιλογής, μπορείτε να ορίσετε εξωτερικά περιθώρια για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, και το τελευταίο θα εμφανίζεται επαρκώς περιτριγυρισμένο από γραμμές κύλισης.Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/2.
Μπορείτε επίσης να ευθυγραμμίσετε την εικόνα στο κέντρο και εάν η εικόνα είναι μεγαλύτερη μητρική εταιρεία, κλιμακώστε το σε μέγεθος μητρική εταιρεία.
Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/3.
Παράδειγμα με μεγάλη εικόνα:
Καλημέρα, συνδρομητές και αναγνώστες αυτής της έκδοσης. Σήμερα θέλω να μπω σε λεπτομέρειες και να σας πω πώς να κεντράρετε κείμενο στο CSS. Σε κάποια προηγούμενα άρθρα έθιξα εμμέσως αυτό το θέμα, άρα έχετε κάποιες γνώσεις σε αυτόν τον τομέα.
Ωστόσο, σε αυτή τη δημοσίευση θα σας μιλήσω για με όλους τους δυνατούς τρόπουςευθυγράμμιση αντικειμένων και εξηγήστε επίσης πώς να κάνετε εσοχές και κόκκινες γραμμές στις παραγράφους. Ας αρχίσουμε λοιπόν να μαθαίνουμε το υλικό!
Η HTML και οι απόγονοί της και ευθυγράμμιση
Αυτή η μέθοδος δεν χρησιμοποιείται σχεδόν ποτέ, καθώς έχει αντικατασταθεί από εργαλεία διαδοχικών φύλλων στυλ. Ωστόσο, το να γνωρίζετε ότι υπάρχει μια τέτοια ετικέτα δεν θα σας βλάψει.
Σχετικά με την επικύρωση ( αυτός ο όροςπεριγράφεται λεπτομερώς στο άρθρο ""), τότε η ίδια η προδιαγραφή html καταδικάζει τη χρήση < κέντρο>, αφού για εγκυρότητα είναι απαραίτητη η χρήση μετάβασης DOCTYPE>.
Αυτός ο τύποςεπιτρέπει τη διέλευση απαγορευμένων στοιχείων.
Τώρα ας προχωρήσουμε στο χαρακτηριστικό ευθυγραμμίζω. Ορίζει την οριζόντια στοίχιση των αντικειμένων και ταιριάζει μετά τη δήλωση της ετικέτας. Συνήθως, μπορεί να χρησιμοποιηθεί για την ευθυγράμμιση περιεχομένου προς τα αριστερά ( αριστερά), κατά μήκος της δεξιάς άκρης ( σωστά), στο κέντρο ( κέντρο) και κατά πλάτος κειμένου ( δικαιολογώ).
Παρακάτω θα δώσω ένα παράδειγμα στο οποίο θα τοποθετήσω την εικόνα και την παράγραφο στο κέντρο.
Αυτό το περιεχόμενο θα είναι κεντραρισμένο.
Λάβετε υπόψη ότι για την εικόνα το χαρακτηριστικό που αναλύουμε έχει ελαφρώς διαφορετική σημασία.
Στο παράδειγμα που χρησιμοποίησα align="Μέσης". Χάρη σε αυτό, η εικόνα ευθυγραμμίστηκε έτσι ώστε η πρόταση να βρίσκεται καθαρά στη μέση της εικόνας.
Εργαλεία κεντραρίσματος σε css
Οι ιδιότητες CSS που έχουν σχεδιαστεί για να ευθυγραμμίζουν μπλοκ, κείμενο και περιεχόμενο γραφικών χρησιμοποιούνται πολύ πιο συχνά. Αυτό οφείλεται κυρίως στην ευκολία και την ευελιξία των στυλ υλοποίησης.
Ας ξεκινήσουμε λοιπόν με την πρώτη ιδιότητα του κεντραρίσματος κειμένου - αυτή είναι κείμενο-ευθυγραμμίζω.
Λειτουργεί με τον ίδιο τρόπο όπως το align in . Μεταξύ των λέξεων-κλειδιών μπορείτε να επιλέξετε μία από αυτές γενική λίσταή κληρονομούν τα χαρακτηριστικά ενός προγόνου ( κληρονομώ).
Θα ήθελα να σημειώσω ότι στο css3 μπορείτε να ορίσετε 2 ακόμη παραμέτρους: αρχή– ανάλογα με τους κανόνες γραφής κειμένου (από δεξιά προς τα αριστερά ή αντίστροφα), ορίζει τη στοίχιση προς τα αριστερά ή προς τα δεξιά (παρόμοια με την εργασία αριστερά ή δεξιά) και τέλος– το αντίθετο της αρχής (όταν γράφετε κείμενο από αριστερά προς τα δεξιά λειτουργεί ως δεξιά, όταν γράφετε από δεξιά προς τα αριστερά – αριστερά).
Πρόταση στα δεξιά
Πρόταση που χρησιμοποιεί τέλος
Θα σας πω για μικρό τσιπ. Όταν επιλέγετε μια τιμή δικαιολογώη τελευταία γραμμή μπορεί να κρέμεται μη ελκυστικά από το κάτω μέρος. Για να το τοποθετήσετε, για παράδειγμα, στο κέντρο, μπορείτε να χρησιμοποιήσετε το ακίνητο 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 |
ντο ΣΕμι ΤΣΧΕΤΙΚΑ ΜΕΠΡΟΣ ΤΗΝ
|
Εσοχές
Και τέλος φτάνουμε στις εσοχές της παραγράφου. ΣΕ γλώσσα cssμεταχειρισμένος ειδική ιδιοκτησίαμε τίτλο κείμενο-εσοχή.
Με τη βοήθειά του μπορείτε να κάνετε τόσο μια κόκκινη γραμμή όσο και μια προεξοχή (πρέπει να καθορίσετε μια αρνητική τιμή).
Για να δημιουργήσετε μια κόκκινη γραμμή χρειάζεται να γνωρίζετε μόνο μία παράμετρο.
Αυτή είναι η ιδιότητα απλής εσοχής κειμένου.
Κεντράροντας στοιχεία κατακόρυφα με χρησιμοποιώντας CSSείναι μια εργασία που παρουσιάζει κάποια δυσκολία για τους προγραμματιστές. Ωστόσο, υπάρχουν αρκετές μέθοδοι για την επίλυσή του, οι οποίες είναι αρκετά απλές. ΣΕ αυτό το μάθημαΠαρουσιάστηκαν 6 επιλογές κατακόρυφο κεντράρισμαπεριεχόμενο.
Ας ξεκινήσουμε με γενική περιγραφήκαθήκοντα.
Πρόβλημα κάθετου κεντραρίσματος
Το οριζόντιο κεντράρισμα είναι πολύ απλό και εύκολο. Όταν το κεντραρισμένο στοιχείο είναι ενσωματωμένο, χρησιμοποιούμε την ιδιότητα στοίχισης σε σχέση με το γονικό στοιχείο. Όταν το στοιχείο είναι σε επίπεδο μπλοκ, ορίζουμε το πλάτος του και αυτόματη εγκατάστασηαριστερά και δεξιά περιθώρια.
Οι περισσότεροι άνθρωποι χρησιμοποιούν ιδιότητα στοίχισης κειμένου: , αποκτήστε πρόσβαση στην ιδιότητα κατακόρυφης στοίχισης για να κεντράρετε κατακόρυφα. Όλα φαίνονται αρκετά λογικά. Εάν έχετε χρησιμοποιήσει πρότυπα πινάκων, πιθανότατα έχετε κάνει εκτεταμένη χρήση του χαρακτηριστικού valign, το οποίο ενισχύει την πεποίθηση ότι κάθετη στοίχιση ο σωστός τρόποςγια την επίλυση του προβλήματος.
Αλλά το χαρακτηριστικό valign λειτουργεί μόνο σε κελιά πίνακα. ΕΝΑ ιδιότητα κάθετης ευθυγράμμισηςπολύ παρόμοια με αυτόν. Επηρεάζει επίσης τα κελιά του πίνακα και ορισμένα ενσωματωμένα στοιχεία.
Η τιμή της ιδιότητας κατακόρυφης στοίχισης είναι σχετική με το γονικό ενσωματωμένο στοιχείο.
- Σε μια γραμμή κειμένου, η στοίχιση είναι σχετική με το ύψος της γραμμής.
- Το κελί του πίνακα χρησιμοποιεί στοίχιση σε σχέση με μια τιμή που υπολογίζεται από έναν ειδικό αλγόριθμο (συνήθως το ύψος της γραμμής).
Αλλά δυστυχώς, η ιδιότητα κάθετης στοίχισης δεν λειτουργεί σε στοιχεία σε επίπεδο μπλοκ (για παράδειγμα, παράγραφοι μέσα στοιχείο div). Αυτή η κατάσταση μπορεί να κάνει κάποιον να πιστέψει ότι δεν υπάρχει λύση στο πρόβλημα της κάθετης ευθυγράμμισης.
Υπάρχουν όμως και άλλες μέθοδοι κεντραρίσματος στοιχείων μπλοκ, η επιλογή των οποίων εξαρτάται από το τι κεντράρεται σε σχέση με το εξωτερικό δοχείο.
Μέθοδος ύψους γραμμής
Αυτή η μέθοδοςλειτουργεί όταν θέλετε να κεντράρετε κάθετα μια γραμμή κειμένου. Το μόνο που έχετε να κάνετε είναι να ορίσετε το ύψος της γραμμής να είναι μεγαλύτερο από το μέγεθος της γραμματοσειράς.
Προκαθορισμένο ελεύθερος χώροςθα κατανεμηθεί ομοιόμορφα πάνω και κάτω από το κείμενο. Και η γραμμή θα είναι κεντραρισμένη κάθετα. Συχνά γίνεται το ύψος της γραμμής ίσο ύψοςστοιχείο.
HTML:
CSS:
#child (ύψος γραμμής: 200 px; )
Αυτή η μέθοδος λειτουργεί σε όλα τα προγράμματα περιήγησης, αν και μπορεί να χρησιμοποιηθεί μόνο για μία γραμμή. Η τιμή 200 px στο παράδειγμα επιλέχθηκε αυθαίρετα. Μπορούν να χρησιμοποιηθούν οποιεσδήποτε τιμές μεγαλύτερο μέγεθοςγραμματοσειρά κειμένου.
Κεντράρισμα εικόνας χρησιμοποιώντας Ύψος γραμμής
Τι γίνεται αν το περιεχόμενο είναι εικόνα; Θα λειτουργήσει η παραπάνω μέθοδος; Η απάντηση βρίσκεται σε μια ακόμη γραμμή κώδικα CSS.
HTML:
CSS:
#parent (ύψος γραμμής: 200 εικονοστοιχεία; ) #parent img (κατακόρυφη στοίχιση: μέση; )
Εννοια ιδιότητες ύψους γραμμήςπρέπει να είναι μεγαλύτερο από το ύψος της εικόνας.
Μέθοδος πίνακα 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 και γνώση του ύψους του ένθετου στοιχείου.
συμπέρασμα
Όλες οι μέθοδοι που περιγράφονται είναι εύκολες στη χρήση. Η δυσκολία είναι ότι κανένα από αυτά δεν είναι κατάλληλο για όλες τις περιπτώσεις. Πρέπει να αναλύσετε το έργο και να επιλέξετε αυτό που ταιριάζει ο καλύτερος τρόποςσύμφωνα με τις απαιτήσεις.
Πολύ συχνά, η εργασία είναι να ευθυγραμμιστεί ένα μπλοκ στο κέντρο της σελίδας/οθόνης, ακόμη και έτσι χωρίς σενάριο Java, χωρίς καθορισμό άκαμπτων διαστάσεων ή αρνητικών εσοχών, και έτσι ώστε οι γραμμές κύλισης να λειτουργούν για τον γονέα εάν το μπλοκ υπερβαίνει το μέγεθός του . Υπάρχουν πολλά μονότονα παραδείγματα στο Διαδίκτυο σχετικά με τον τρόπο ευθυγράμμισης ενός μπλοκ στο κέντρο της οθόνης. Κατά κανόνα, τα περισσότερα από αυτά βασίζονται στις ίδιες αρχές.
Παρακάτω είναι οι κύριοι τρόποι επίλυσης του προβλήματος, τα πλεονεκτήματα και τα μειονεκτήματά τους. Για να κατανοήσετε την ουσία των παραδειγμάτων, προτείνω να μειώσετε το ύψος/πλάτος του παραθύρου Αποτέλεσμα στα παραδείγματα στους συνδέσμους που παρέχονται.
Επιλογή 1: Αρνητική εσοχή.
Τοποθέτηση ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟχρησιμοποιώντας τα χαρακτηριστικά επάνω και αριστερά κατά 50% και γνωρίζοντας εκ των προτέρων το ύψος και το πλάτος του μπλοκ, ορίστε ένα αρνητικό περιθώριο, το οποίο είναι ίσο με το μισό μέγεθος ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Ένα τεράστιο μειονέκτημα αυτής της επιλογής είναι ότι πρέπει να μετράτε αρνητικές εσοχές. Επίσης ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν συμπεριφέρεται αρκετά σωστά όταν περιβάλλεται από γραμμές κύλισης - απλώς κόβεται επειδή έχει αρνητικά περιθώρια.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτο; επάνω: 50%, αριστερά : 50%; περιθώριο: -125px 0 0 -125px (μέγιστο πλάτος: 100%; ύψος: αυτόματη; εμφάνιση: μπλοκ; περιθώριο: κανένα; )
Επιλογή 2. Αυτόματη εσοχή.
Λιγότερο κοινό, αλλά παρόμοιο με το πρώτο. Για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟΡυθμίζουμε το πλάτος και το ύψος, τοποθετούμε τα χαρακτηριστικά πάνω δεξιά κάτω αριστερά στο 0 και ορίζουμε το margin auto. Το πλεονέκτημα αυτής της επιλογής είναι οι λειτουργικές γραμμές κύλισης μητρική εταιρεία, εάν το τελευταίο έχει 100% πλάτος και ύψος. Το μειονέκτημα αυτής της μεθόδου είναι η άκαμπτη ρύθμιση των διαστάσεων.
Γονικό ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτη; επάνω: 0; δεξιά: 0, κάτω: 0, περιθώριο: αυτόματο img
Επιλογή 3. Πίνακας.
Ας ρωτήσουμε μητρική εταιρείαστυλ πίνακα, κελί μητρική εταιρείαΡυθμίστε τη στοίχιση κειμένου στο κέντρο. ΕΝΑ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟορίζουμε το μοντέλο μπλοκ γραμμής. Τα μειονεκτήματα που έχουμε είναι οι μη λειτουργικές γραμμές κύλισης και γενικά η αισθητική της «εξομοίωσης» του πίνακα δεν είναι.
Γονικός ( πλάτος: 100%; ύψος: 100%, εμφάνιση: πίνακας; θέση: απόλυτη; επάνω: 0; αριστερά: 0; > .inner ( οθόνη: πίνακας-κελί; στοίχιση κειμένου: κέντρο; κατακόρυφη στοίχιση: μέση; ) ) .block ( display: inline-block; img ( display: block; περίγραμμα: κανένα; ) )
Για να προσθέσετε μια κύλιση σε αυτό το παράδειγμα, θα πρέπει να προσθέσετε ένα ακόμη στοιχείο στο σχέδιο.
Παράδειγμα: jsfiddle.net/serdidg/fk5nqh52/3.
Επιλογή 4. Ψευδοστοιχείο.
Αυτή η επιλογή δεν περιέχει όλα τα προβλήματα που αναφέρονται στις προηγούμενες μεθόδους και επιλύει επίσης τα αρχικά προβλήματα. Το θέμα είναι ότι μητρική εταιρείασετ στυλ ψευδοστοιχείοπριν, δηλαδή 100% ύψος, ευθυγράμμιση στο κέντρο και ενσωματωμένο μοντέλο μπλοκ. είναι το ίδιο με ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟτοποθετείται ένα μοντέλο μπλοκ γραμμής, στο κέντρο. Προς την ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟδεν «έπεσε» από κάτω ψευδοστοιχείο, όταν οι διαστάσεις του πρώτου είναι μεγαλύτερες από μητρική εταιρεία, υποδεικνύω μητρική εταιρείαλευκό διάστημα: nowrap και μέγεθος γραμματοσειράς: 0, μετά το οποίο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟακυρώστε αυτά τα στυλ με το εξής - κενό διάστημα: κανονικό. Σε αυτό το παράδειγμα, απαιτείται μέγεθος γραμματοσειράς: 0 για να αφαιρέσετε το διάστημα που προκύπτει μεταξύ τους μητρική εταιρείαΚαι ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟλόγω μορφοποίησης κώδικα. Ο χώρος μπορεί να αφαιρεθεί με άλλους τρόπους, αλλά θεωρείται καλύτερο να τον αποφύγετε.
Γονικός (πλάτος: 100%; ύψος: 100%, θέση: απόλυτο; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; κενό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν ( ύψος: 100% οθόνη: κάθετη στοίχιση: ""εμφάνιση: κανένα;
Ή, εάν χρειάζεται ο γονέας να καταλαμβάνει μόνο το ύψος και το πλάτος του παραθύρου και όχι ολόκληρη τη σελίδα:
Γονικός (θέση: σταθερό; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; υπερχείλιση: αυτόματο; κενό διάστημα: nowrap; στοίχιση κειμένου: κέντρο; μέγεθος γραμματοσειράς: 0; &:πριν (ύψος: 100% εμφάνιση: κατακόρυφη στοίχιση: "" (εμφάνιση: κανένα;)
Επιλογή 5. Flexbox.
Ένας από τους απλούστερους και πιο κομψούς τρόπους είναι να χρησιμοποιήσετε το flexbox. Δεν απαιτεί περιττές κινήσεις του σώματος, περιγράφει ξεκάθαρα την ουσία αυτού που συμβαίνει και είναι ιδιαίτερα ευέλικτο. Το μόνο πράγμα που αξίζει να θυμάστε όταν επιλέγετε αυτήν τη μέθοδο είναι η υποστήριξη για IE από την έκδοση 10 συμπεριλαμβανομένης. caniuse.com/#feat=flexbox
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; οθόνη: flex; στοίχιση-στοιχεία: κέντρο; στοίχιση-περιεχόμενο: κέντρο; δικαιολογία-περιεχόμενο: κέντρο; υπερχείλιση: αυτόματη; ) .block ( φόντο: #60a839; img ( εμφάνιση: μπλοκ; περίγραμμα: κανένα; ) )
Επιλογή 6. Μετασχηματισμός.
Κατάλληλο εάν περιοριζόμαστε από τη δομή και δεν υπάρχει τρόπος χειρισμού του γονικού στοιχείου, αλλά το μπλοκ πρέπει να ευθυγραμμιστεί με κάποιο τρόπο. Η συνάρτηση css translate() θα έρθει στη διάσωση. Μια τιμή 50% απόλυτης τοποθέτησης θα τοποθετήσει την επάνω αριστερή γωνία του μπλοκ ακριβώς στο κέντρο και, στη συνέχεια, μια αρνητική τιμή μετάφρασης θα μετακινήσει το μπλοκ σε σχέση με τις δικές του διαστάσεις. Λάβετε υπόψη ότι τα αρνητικά εφέ μπορεί να εμφανιστούν με τη μορφή θολών άκρων ή στυλ γραμματοσειράς. Επίσης, αυτή η μέθοδος μπορεί να οδηγήσει σε προβλήματα με τον υπολογισμό της θέσης του μπλοκ χρησιμοποιώντας java-script Μερικές φορές, για να αντισταθμιστεί η απώλεια του 50% του πλάτους λόγω της χρήσης ιδιότητες cssαριστερά μπορεί να βοηθηθεί από τον κανόνα που καθορίζεται για το μπλοκ: margin-right: -50%; .
Γονικό (πλάτος: 100%; ύψος: 100%, θέση: σταθερό; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block (θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; μετατροπή: μετάφραση( -50%, -50%) img (εμφάνιση: μπλοκ; ) )
Επιλογή 7. Κουμπί.
Επιλογή χρήστη όπου ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟπλαισιωμένο σε μια ετικέτα κουμπιού. Το κουμπί έχει την ιδιότητα να κεντράρει όλα όσα βρίσκονται μέσα του, δηλαδή τα στοιχεία του μοντέλου inline και block-line (inline-block). Στην πράξη δεν συνιστώ τη χρήση του.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; φόντο: κανένα; περίγραμμα: κανένα; περίγραμμα: κανένα; ) .block ( οθόνη: ενσωματωμένο μπλοκ; img (εμφάνιση: μπλοκ;; περίγραμμα: κανένα; ) )
Δώρο
Χρησιμοποιώντας την ιδέα της 4ης επιλογής, μπορείτε να ορίσετε εξωτερικά περιθώρια για ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, και το τελευταίο θα εμφανίζεται επαρκώς περιτριγυρισμένο από γραμμές κύλισης.Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/2.
Μπορείτε επίσης να ευθυγραμμίσετε την εικόνα στο κέντρο και εάν η εικόνα είναι μεγαλύτερη μητρική εταιρεία, κλιμακώστε το σε μέγεθος μητρική εταιρεία.
Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/3.
Παράδειγμα με μεγάλη εικόνα:
