Στοίχιση στο κέντρο html css. Οριζόντια και κάθετη στοίχιση στοιχείων
Πολύ συχνά η εργασία είναι να ευθυγραμμιστεί ένα μπλοκ στο κέντρο της σελίδας/οθόνης, ακόμα και χωρίς δέσμη ενεργειών Java, χωρίς καθορισμό άκαμπτων διαστάσεων ή αρνητικών εσοχών και έτσι ώστε οι γραμμές κύλισης να λειτουργούν για τον γονέα εάν το μπλοκ υπερβαίνει το μέγεθός του . Υπάρχουν πολλά μονότονα παραδείγματα στο Διαδίκτυο σχετικά με τον τρόπο ευθυγράμμισης ενός μπλοκ στο κέντρο της οθόνης. Κατά κανόνα, τα περισσότερα από αυτά βασίζονται στις ίδιες αρχές.
Παρακάτω είναι οι κύριοι τρόποι επίλυσης του προβλήματος, τα πλεονεκτήματα και τα μειονεκτήματά τους. Για να κατανοήσετε την ουσία των παραδειγμάτων, προτείνω να μειώσετε το ύψος/πλάτος του παραθύρου Αποτέλεσμα στα παραδείγματα στους συνδέσμους που παρέχονται.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; ) .block ( πλάτος: 250 px; ύψος: 250 px; θέση: απόλυτο; επάνω: 50%, αριστερά : 50%; περιθώριο: -125px 0 0 -125px (μέγιστο πλάτος: 100%; ύψος: αυτόματη; εμφάνιση: μπλοκ; περιθώριο: κανένα; )
Επιλογή 2. Αυτόματη εσοχή. Λιγότερο κοινό, αλλά παρόμοιο με το πρώτο. Για το μπλοκ, ορίζουμε το πλάτος και το ύψος, τοποθετούμε τα χαρακτηριστικά πάνω δεξιά κάτω αριστερά στο 0 και ορίζουμε το περιθώριο 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.
Γονικός (πλάτος: 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. Κουμπί. Επιλογή azproduction χρήστη, όπου το μπλοκ πλαισιώνεται σε μια ετικέτα κουμπιού. Το κουμπί έχει την ιδιότητα να κεντράρει όλα όσα βρίσκονται μέσα του, δηλαδή τα στοιχεία του μοντέλου inline και block-line (inline-block). Στην πράξη δεν συνιστώ τη χρήση του.
Γονικός ( πλάτος: 100%; ύψος: 100%, θέση: απόλυτη; επάνω: 0; αριστερά: 0; υπερχείλιση: αυτόματη; φόντο: κανένα; περίγραμμα: κανένα; περίγραμμα: κανένα; ) .block ( οθόνη: ενσωματωμένο μπλοκ; img (εμφάνιση: μπλοκ;; περίγραμμα: κανένα; ) )
Μπόνους Χρησιμοποιώντας την ιδέα της 4ης επιλογής, μπορείτε να ορίσετε εξωτερικά περιθώρια για το μπλοκ και ταυτόχρονα το τελευταίο θα εμφανίζεται επαρκώς περιτριγυρισμένο από γραμμές κύλισης.Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/2.
Μπορείτε επίσης να ευθυγραμμίσετε την εικόνα στο κέντρο και εάν η εικόνα είναι μεγαλύτερη από τη γονική, κλιμακώστε την στο μέγεθος του γονέα.
Παράδειγμα: jsfiddle.net/serdidg/nfqg9rza/3.
Παράδειγμα με μεγάλη εικόνα:
Η διάταξη και η στοίχιση στο κέντρο των σελίδων ιστοτόπων είναι μια δημιουργική προσπάθεια και συχνά προκαλεί δυσκολίες στους αρχάριους. Ας δούμε λοιπόν πώς να το κάνουμε. Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε μια σελίδα με την ακόλουθη δομή:
Η σελίδα μας αποτελείται από τέσσερα μπλοκ: κεφαλίδα, μενού, περιεχόμενο και υποσέλιδο. Για να κεντράρουμε τη σελίδα, θα τοποθετήσουμε αυτά τα τέσσερα μπλοκ σε ένα κύριο μπλοκ:
Επικεφαλίδα ιστότοπου
Περιεχόμενο
Κάτω μέρος του ιστότοπου
Χρησιμοποιώντας αυτήν τη δομή ως παράδειγμα, θα εξετάσουμε διάφορες επιλογές.
Διάταξη και κεντράρισμα μιας θέσης από καουτσούκ
Κατά την τοποθέτηση μιας θέσης από καουτσούκ, η κύρια μονάδα μέτρησης που χρησιμοποιείται είναι -%, επειδή η τοποθεσία πρέπει να εκτείνεται σε όλο το πλάτος και να καταλαμβάνει όλο τον ελεύθερο χώρο.
Επομένως, το πλάτος των μπλοκ "κεφαλίδα" και "υποσέλιδο" θα είναι 100% του πλάτους της οθόνης. Αφήστε το πλάτος του μπλοκ "μενού" να είναι 30%, και το μπλοκ "περιεχόμενο" θα πρέπει να βρίσκεται δίπλα στο μπλοκ "μενού", π.χ. πρέπει να έχει ένα αριστερό περιθώριο (περιθώριο-αριστερά) με πλάτος ίσο με το πλάτος του μπλοκ "μενού", δηλ. τριάντα%.
Για να κάνουμε τα μπλοκ "μενού" και "περιεχομένου" να κάθονται το ένα δίπλα στο άλλο, ας κάνουμε το μπλοκ "μενού" να επιπλέει και ωθήστε το προς την αριστερή άκρη. Θα ορίσουμε επίσης τα χρώματα φόντου για τα μπλοκ μας. Τώρα ας τα γράψουμε όλα αυτά στο φύλλο στυλ (στη σελίδα style.css)
#header( background:#3e4982; πλάτος:100%; ύψος:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :αριστερά; πλάτος: 300 εικονοστοιχεία: μέγεθος γραμματοσειράς: 18 εικονοστοιχεία; #3e4982 πλάτος:100 px;
Το ύψος των μπλοκ ορίστηκε υπό όρους ώστε το αποτέλεσμα να είναι ορατό. Δείτε τη σελίδα μας στο πρόγραμμα περιήγησής σας:
Εάν αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης, το πλάτος όλων των μπλοκ θα αλλάξει. Αυτό δεν είναι πάντα βολικό, γιατί... Όταν το μπλοκ μενού είναι τεντωμένο, εμφανίζεται κενός χώρος. Επομένως, το πλάτος του μπλοκ "μενού" είναι συχνά σταθερό, οπότε ας κάνουμε το ίδιο. Για να το κάνετε αυτό, αντικαταστήστε τις τιμές των αντίστοιχων ιδιοτήτων στο φύλλο στυλ:
... #menu( φόντο:#6173cb; float:αριστερά; πλάτος:200px; ύψος:300px; ) #content( background:#ffffff; margin-left:200px; ύψος:300px; ) ...
Τώρα η σελίδα μας απλώνεται πιο φυσικά. Με ρευστή διάταξη, οι σελίδες καταλαμβάνουν όλο το πλάτος της οθόνης, επομένως δεν απαιτείται στοίχιση σελίδας.
Αλλά αν θέλετε, μπορείτε να κάνετε τη σελίδα σας να έχει ίση αναπλήρωση στα αριστερά και στα δεξιά της οθόνης. Για να το κάνετε αυτό, πρέπει να προσθέσετε ένα στυλ στο "κύριο" μπλοκ, το οποίο είναι ένα κοντέινερ για όλα τα άλλα μπλοκ:
Τώρα η σελίδα μας μοιάζει με αυτό:
Διάταξη και κεντράρισμα του χώρου, σταθερό πλάτος
Σε αυτήν την περίπτωση, θα πρέπει να ορίσουμε σταθερά μεγέθη για τα μπλοκ μας:
#main( πλάτος:800px; ) #header( background:#3e4982; πλάτος:800px; ύψος:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( φόντο:#6173cb; float:αριστερά; πλάτος:200px; ύψος:300px; στοίχιση κειμένου:κέντρο; χρώμα:#FFFFFF; μέγεθος γραμματοσειράς:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; text-align:center ) #footer(φόντο:#3e4982; clear:και τα δύο; πλάτος:800px;ύψος:50px; text-align:center; color:#FFFFFF; Μέγεθος: 14 px;
Τώρα η σελίδα μας πιέζεται στο αριστερό άκρο της οθόνης.
Σε αυτήν την περίπτωση, η στοίχιση στο κέντρο των σελίδων του ιστότοπου μπορεί να γίνει ως εξής. Ας θυμηθούμε ότι η σελίδα μας έχει μια ετικέτα "body", στην οποία μπορεί επίσης να δοθεί πλάτος και κάποια γέμιση.
Ας το κάνουμε αυτό: δώστε στην ετικέτα "body" ένα πλάτος 800 pixel (όπως το "κύριο" μπλοκ) και ένα padding-αριστερό 50%. Στη συνέχεια, ολόκληρο το περιεχόμενο του "κύριου" μπλοκ θα εμφανιστεί στη δεξιά πλευρά της οθόνης (δηλαδή από τη μέση προς τα δεξιά):
Προκειμένου το "κύριο" μπλοκ μας να βρίσκεται στη μέση της οθόνης, η μέση του πρέπει να συμπίπτει με τη μέση της ετικέτας "σώμα". Εκείνοι. πρέπει να μετακινήσετε το "κύριο" μπλοκ προς τα αριστερά κατά το ήμισυ του μεγέθους του. Το πλάτος του "κύριου" μπλοκ είναι 800 pixel, πράγμα που σημαίνει ότι πρέπει να ορίσετε την ιδιότητα "margin-left:-400px" σε αυτό. Ναι, αυτή η ιδιότητα μπορεί να λάβει αρνητικές τιμές και, στη συνέχεια, το αριστερό περιθώριο μειώνεται (δηλαδή μετατοπίζεται προς τα αριστερά). Και αυτό ακριβώς χρειαζόμαστε.
Το φύλλο στυλ τώρα μοιάζει με αυτό:
body(πλάτος:800px; padding-left:50%; ) #main(πλάτος:800px; margin-left:-400px; ) #header( background:#3e4982; πλάτος:800px; ύψος:150px; στοίχιση κειμένου:κέντρο Χρώμα:#FFFFFF; μέγεθος γραμματοσειράς:24px; font-size:18px; padding-top:10px ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer(background:#3e4982; clear:both; πλάτος:800px;text-align:center;font-size:14px;
Και η σελίδα μας στο πρόγραμμα περιήγησης βρίσκεται ακριβώς στη μέση:
Εξετάσαμε δύο επιλογές για κεντράρισμα σελίδων ιστότοπου, στην πραγματικότητα δεν είναι δόγμα. Μπορείτε να πειραματιστείτε και να βρείτε τη δική σας έκδοση, απλώς ελέγξτε πώς λειτουργεί σε διαφορετικά προγράμματα περιήγησης. Δυστυχώς, αυτό που εμφανίζεται καλά στο FireFox ή στο Opera μπορεί να εμφανίζεται εντελώς ακατανόητα στον IE και αντίστροφα. Και αυτό πρέπει να το θυμόμαστε.
Καλή τύχη σε εσάς στη δημιουργική σας αναζήτηση!
Η στοίχιση κειμένου καθορίζει την εμφάνισή του και τον προσανατολισμό των άκρων της παραγράφου και μπορεί να είναι αριστερά, δεξιά, στο κέντρο ή αιτιολογημένη. Στον πίνακα Το σχήμα 1 δείχνει επιλογές για τη στοίχιση ενός μπλοκ κειμένου.
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Η πιο συνηθισμένη επιλογή είναι η αριστερή στοίχιση, όπου το κείμενο στα αριστερά πιέζεται στην άκρη ενώ το κείμενο στα δεξιά παραμένει οδοντωτό. Η στοίχιση δεξιά και κέντρο χρησιμοποιείται κυρίως σε επικεφαλίδες και υποτίτλους. Λάβετε υπόψη ότι όταν χρησιμοποιείτε αιτιολόγηση, μπορεί να εμφανίζονται μεγάλα κενά μεταξύ των λέξεων του κειμένου, κάτι που δεν είναι πολύ ελκυστικό.
Η ετικέτα παραγράφου χρησιμοποιείται συνήθως για να ορίσετε τη στοίχιση κειμένου
Με το χαρακτηριστικό align, το οποίο καθορίζει τη μέθοδο στοίχισης. Επιτρέπεται επίσης η στοίχιση ενός μπλοκ κειμένου χρησιμοποιώντας μια ετικέτα με παρόμοιο χαρακτηριστικό align, όπως φαίνεται στον πίνακα. 2.
| Προσθέτει μια νέα παράγραφο κειμένου, αριστερή στοίχιση από προεπιλογή. Οι μικρές κάθετες εσοχές προστίθενται αυτόματα πριν και μετά τις παραγράφους. | |
Κείμενο |
Στοίχιση στο κέντρο. |
Κείμενο |
Αριστερά ευθυγράμμιση. |
Κείμενο |
|
Κείμενο |
Ευθυγράμμιση πλάτους. |
| Κείμενο | Απενεργοποιεί την αυτόματη αναδίπλωση γραμμής, ακόμα κι αν το κείμενο είναι ευρύτερο από το παράθυρο του προγράμματος περιήγησης. |
| Κείμενο | Επιτρέπει στο πρόγραμμα περιήγησης να σπάσει μια γραμμή στην καθορισμένη τοποθεσία, ακόμα και αν το . |
| Κείμενο | Στοίχιση στο κέντρο. |
| Κείμενο | Αριστερά ευθυγράμμιση. |
| Κείμενο | Δεξιά ευθυγράμμιση. |
| Κείμενο | Ευθυγράμμιση πλάτους. |
Η αριστερή στοίχιση των στοιχείων έχει οριστεί από προεπιλογή, επομένως δεν χρειάζεται να την ορίσετε ξανά. Επομένως, το align="left" μπορεί να παραλειφθεί.
Διαφορά μεταξύ παραγράφου (ετικέτα
) και ετικέτα στο ότι εμφανίζεται μια κατακόρυφη εσοχή στην αρχή και στο τέλος της παραγράφου, κάτι που δεν συμβαίνει όταν χρησιμοποιείται η ετικέτα.
Το χαρακτηριστικό align είναι αρκετά καθολικό και μπορεί να εφαρμοστεί όχι μόνο στο κύριο κείμενο, αλλά και σε επικεφαλίδες όπως το . Το Παράδειγμα 1 δείχνει πώς να ορίσετε την ευθυγράμμιση σε μια τέτοια περίπτωση.
Παράδειγμα 1: Στοίχιση κειμένου
Στοίχιση κειμένου Πώς να πιάσετε ένα λιοντάρι;
Μέθοδος ωμής δύναμης
Χωρίζουμε την έρημο σε μια σειρά από στοιχειώδεις περιοχές, το μέγεθος των οποίων συμπίπτει με τις συνολικές διαστάσεις του λιονταριού, αλλά είναι μικρότερο από το μέγεθος του κλουβιού. Στη συνέχεια, με απλή αναζήτηση προσδιορίζουμε την περιοχή στην οποία βρίσκεται το λιοντάρι, κάτι που οδηγεί αυτόματα στη σύλληψή του.
Μέθοδος διχοτομίας
Χωρίζουμε την έρημο στα δύο. Στο ένα μέρος υπάρχει ένα λιοντάρι, στο άλλο δεν υπάρχει κανένα. Παίρνουμε το μισό στο οποίο βρίσκεται το λιοντάρι και το χωρίζουμε ξανά στη μέση. Το επαναλαμβάνουμε μέχρι να πιαστεί το λιοντάρι.
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.
Ρύζι. 1. Ευθυγραμμίστε το κείμενο δεξιά και αριστερά
Σε αυτό το παράδειγμα, η επικεφαλίδα στοιχίζεται στο κέντρο του παραθύρου του προγράμματος περιήγησης, η επισημασμένη παράγραφος στοιχίζεται προς τα δεξιά και το κείμενο του σώματος στοιχίζεται προς τα αριστερά.
18/02/15 21,4ΚΑν κόψετε σε οποιονδήποτε ιστότοπο που δημιουργήθηκε με βάση html, τότε θα δείτε μια συγκεκριμένη δομή σε επίπεδα. Επιπλέον, η εμφάνισή του θα είναι παρόμοια με ένα στρώμα κέικ. Αν το νομίζετε, τότε πιθανότατα δεν έχετε φάει για πολύ καιρό. Επομένως, πρώτα ικανοποιήστε την πείνα σας και μετά θα σας πούμε πώς να κεντράρετε ένα επίπεδο div στον ιστότοπό σας:
Πλεονεκτήματα της διάταξης με χρήση ετικέταςΥπάρχουν δύο κύριοι τύποι δομής ιστότοπου:
- Πινακοειδής;
- ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.
Η διάταξη πινάκων ήταν κυρίαρχη ακόμη και στην αυγή του Διαδικτύου. Τα πλεονεκτήματά του περιλαμβάνουν την ακρίβεια της καθορισμένης τοποθέτησης. Ωστόσο, έχει εμφανείς ελλείψεις. Τα κυριότερα είναι το μήκος του κώδικα και η χαμηλή ταχύτητα φόρτωσης.
Όταν χρησιμοποιείτε διάταξη πίνακα, η ιστοσελίδα δεν θα εμφανίζεται μέχρι να φορτωθεί πλήρως. Ενώ όταν χρησιμοποιείτε μπλοκ div, τα στοιχεία εμφανίζονται αμέσως.
Εκτός από την υψηλή ταχύτητα φόρτωσης, η κατασκευή μπλοκ ενός ιστότοπου σάς επιτρέπει να μειώσετε την ποσότητα του κώδικα html αρκετές φορές. Συμπεριλαμβανομένης της χρήσης κλάσεων CSS.
Ωστόσο, η διάταξη πίνακα θα πρέπει να χρησιμοποιείται για τη δομή της εμφάνισης των δεδομένων στη σελίδα. Κλασικό παράδειγμα χρήσης του είναι η προβολή πινάκων.
Η κατασκευή μπλοκ που βασίζεται σε ετικέτες ονομάζεται επίσης layer-by-layer και τα ίδια τα μπλοκ ονομάζονται στρώματα. Αυτό συμβαίνει επειδή όταν χρησιμοποιούνται ορισμένες τιμές ιδιοτήτων, μπορούν να στοιβάζονται η μία πάνω στην άλλη, παρόμοια με τα επίπεδα στο Photoshop.
Βοηθήματα τοποθέτησηςΣτη διάταξη μπλοκ, είναι προτιμότερο να τοποθετείτε στρώματα χρησιμοποιώντας επικαλυπτόμενα φύλλα στυλ. Η κύρια ιδιότητα CSS που είναι υπεύθυνη για τη διάταξη είναι το float.
Σύνταξη ιδιότητας:
float: αριστερά | δεξιά | κανένα | κληρονομώ
Οπου:
- αριστερά – ευθυγραμμίστε το στοιχείο στο αριστερό άκρο της οθόνης. Η ροή γύρω από τα υπόλοιπα στοιχεία εμφανίζεται στα δεξιά.
- δεξιά – ευθυγράμμιση στα δεξιά, ροή γύρω από άλλα στοιχεία – στα αριστερά.
- Κανένα – δεν επιτρέπεται η συσκευασία.
- inherit – κληρονομεί την τιμή του γονικού στοιχείου.
Ας δούμε ένα ελαφρύ παράδειγμα τοποθέτησης div χρησιμοποιώντας αυτήν την ιδιότητα:
#left ( πλάτος: 200 px; ύψος: 100 px; float: αριστερά; φόντο: rgb(255,51,102); ) #right ( πλάτος: 200 px; ύψος: 100 px; float: δεξιά; φόντο: rgb(0,255,153); ) Αριστερό μπλοκ Δεξί μπλοκ
Τώρα θα προσπαθήσουμε να χρησιμοποιήσουμε την ίδια ιδιότητα για να τοποθετήσουμε το τρίτο div στο κέντρο της σελίδας. Αλλά δυστυχώς το float δεν έχει κεντρική τιμή. Και όταν δίνετε σε ένα νέο μπλοκ μια τιμή στοίχισης προς τα δεξιά ή προς τα αριστερά, μετατοπίζεται προς την καθορισμένη κατεύθυνση. Επομένως, το μόνο που μένει είναι να ορίσετε το float: αριστερά και στα τρία μπλοκ:
Αλλά ούτε αυτή είναι η καλύτερη επιλογή. Όταν το παράθυρο γίνεται μικρότερο, όλα τα στρώματα παρατάσσονται σε μία σειρά κάθετα και όταν το μέγεθος αυξάνεται, κολλάνε στην αριστερή άκρη του παραθύρου. Χρειαζόμαστε λοιπόν έναν καλύτερο τρόπο να κεντράρουμε το div. Κεντράρισμα στρωμάτων
Στο επόμενο παράδειγμα, θα χρησιμοποιήσουμε ένα στρώμα δοχείου στο οποίο θα τοποθετήσουμε τα υπόλοιπα στοιχεία. Αυτό λύνει το πρόβλημα των μπλοκ που μετακινούνται μεταξύ τους όταν αλλάζει το μέγεθος του παραθύρου. Το κεντράρισμα του δοχείου στη μέση γίνεται με τη ρύθμιση των ιδιοτήτων περιθωρίου στο μηδέν για τα περιθώρια από το επάνω άκρο και αυτόματο στις πλευρές (περιθώριο: 0 auto ):
#container ( πλάτος: 600 εικονοστοιχεία; περιθώριο: 0 αυτόματο : αριστερά, φόντο: rgb(0,255,153 #κέντρο (πλάτος: 200 px; float: αριστερά; φόντο: rgb(255,0); ) Αριστερό μπλοκ Κεντρικό μπλοκ Δεξιά);
Το ίδιο παράδειγμα δείχνει πώς μπορείτε να κεντράρετε ένα div οριζόντια. Και αν επεξεργαστείτε ελαφρώς τον παραπάνω κώδικα, μπορείτε να επιτύχετε κάθετη ευθυγράμμιση των μπλοκ. Για να το κάνετε αυτό, πρέπει απλώς να αλλάξετε το μήκος του στρώματος του δοχείου (μειώστε το). Δηλαδή, μετά την επεξεργασία, η κλάση του css θα πρέπει να μοιάζει με αυτό:
Μετά την αλλαγή, όλα τα μπλοκ θα ευθυγραμμιστούν αυστηρά σε μια σειρά στη μέση. Και η θέση τους δεν θα αλλάξει ανεξάρτητα από το μέγεθος του παραθύρου του προγράμματος περιήγησης. Δείτε πώς φαίνεται το κάθετα κεντράρισμα ενός div:
Στο παρακάτω παράδειγμα, χρησιμοποιήσαμε μια σειρά από νέες ιδιότητες css για να κεντράρουμε τα επίπεδα μέσα σε ένα κοντέινερ:
#container ( πλάτος: 450 εικονοστοιχεία; ύψος: 150 εικονοστοιχεία; περιθώριο: 0 αυτόματο; χρώμα φόντου:#66CCFF; ) #αριστερά ( πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; φόντο: rgb(255,51,102); οθόνη: ενσωματωμένο μπλοκ; κατακόρυφη στοίχιση: μεσαίο, περιθώριο αριστερά: 35 εικονοστοιχεία; #κέντρο (πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; φόντο: rgb(255,0,0); οθόνη: ενσωματωμένο μπλοκ; κατακόρυφη στοίχιση: μέση; περιθώριο-αριστερά: 35 εικονοστοιχεία; )
Μια σύντομη περιγραφή των ιδιοτήτων css και των τιμών τους που χρησιμοποιήσαμε σε αυτό το παράδειγμα για να κεντράρουμε ένα div σε ένα div:
- οθόνη: inline-block – ευθυγραμμίζει ένα στοιχείο μπλοκ σε μια γραμμή και διασφαλίζει ότι τυλίγεται γύρω από ένα άλλο στοιχείο.
- vertical-align: middle – ευθυγραμμίζει το στοιχείο στη μέση σε σχέση με το γονικό.
- margin-left – ορίζει το αριστερό περιθώριο.
Όσο περίεργο κι αν ακούγεται, αυτό είναι δυνατό. Μερικές φορές μπορεί να χρειαστεί ένα μπλοκ div ως σύνδεσμος κατά τη διάταξη διαφόρων τύπων μενού. Ας δούμε ένα πρακτικό παράδειγμα εφαρμογής ενός επιπέδου σύνδεσης:
#layer1( πλάτος: 500 px; ύψος: 100 px; φόντο: rgb(51,255,204); περίγραμμα: αυλάκωση; ) a ( οθόνη: μπλοκ; στοίχιση κειμένου: κέντρο; ύψος: 100%; χρώμα: rgb(255,0,51) ;) Σύνδεσμος στον ιστότοπό μας
Σε αυτό το παράδειγμα, χρησιμοποιώντας την εμφάνιση γραμμής: μπλοκ, ορίσαμε τη σύνδεση στην τιμή ενός στοιχείου μπλοκ. Και έτσι ώστε ολόκληρο το ύψος του μπλοκ div να γίνει σύνδεσμος, ορίστε το ύψος : 100%. Απόκρυψη και εμφάνιση στοιχείων μπλοκ
Τα στοιχεία μπλοκ παρέχουν περισσότερες ευκαιρίες για επέκταση της λειτουργικότητας της διεπαφής από την παλιά διάταξη πίνακα. Συμβαίνει συχνά ο σχεδιασμός της ιστοσελίδας να είναι μοναδικός και αναγνωρίσιμος. Αλλά για μια τέτοια αποκλειστικότητα πρέπει να πληρώσετε με έλλειψη ελεύθερου χώρου.
Αυτό ισχύει ιδιαίτερα για την κύρια σελίδα, το κόστος της διαφήμισης στην οποία είναι το υψηλότερο. Ως εκ τούτου, προκύπτει το πρόβλημα σχετικά με το πού να «χωθεί» ένα άλλο διαφημιστικό banner. Και εδώ δεν μπορείτε να ξεφύγετε από την ευθυγράμμιση του div στο κέντρο της σελίδας!
Μια πιο ορθολογική λύση είναι να κάνετε κάποιο μπλοκ κρυφό. Ακολουθεί ένα απλό παράδειγμα μιας τέτοιας υλοποίησης:
#layer1( display:block; πλάτος: 500px; ύψος: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) other ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )
Αυτό είναι το μαγικό κουμπί. Κάνοντας κλικ σε αυτό θα κρυφτεί ή θα εμφανιστεί το μπλοκ απόκρυψης.
Καλημέρα, συνδρομητές και αναγνώστες αυτής της έκδοσης. Σήμερα θέλω να μπω σε λεπτομέρειες και να σας πω πώς να κεντράρετε κείμενο στο CSS. Σε κάποια προηγούμενα άρθρα, έθιξα έμμεσα αυτό το θέμα, οπότε έχετε κάποιες γνώσεις σε αυτόν τον τομέα.
Ωστόσο, σε αυτήν τη δημοσίευση θα σας πω για όλους τους διαφορετικούς τρόπους στοίχισης αντικειμένων και θα εξηγήσω επίσης πώς να κάνετε εσοχές και κόκκινες γραμμές στις παραγράφους. Ας αρχίσουμε λοιπόν να μαθαίνουμε το υλικό!
Html και οι απόγονοί του και ευθυγραμμίστεΑυτή η μέθοδος δεν χρησιμοποιείται σχεδόν ποτέ, καθώς έχει αντικατασταθεί από εργαλεία τύπου cascading style sheet. Ωστόσο, το να γνωρίζετε ότι υπάρχει μια τέτοια ετικέτα δεν θα σας βλάψει.
Όσον αφορά την επικύρωση (αυτός ο όρος περιγράφεται λεπτομερώς στο άρθρο ""), η ίδια η προδιαγραφή html καταδικάζει τη χρήση< center>, αφού για εγκυρότητα είναι απαραίτητη η χρήση του μεταβατικού DOCTYPE> .
Αυτός ο τύπος επιτρέπει τη διέλευση απαγορευμένων στοιχείων.
ΚΕΝΤΡΟ
Αυτό το περιεχόμενο θα είναι κεντραρισμένο.
Λάβετε υπόψη ότι για την εικόνα το χαρακτηριστικό που αναλύουμε έχει ελαφρώς διαφορετική σημασία.
Στο παράδειγμα χρησιμοποίησα align=" μέση" . Χάρη σε αυτό, η εικόνα ευθυγραμμίστηκε έτσι ώστε η πρόταση να βρίσκεται καθαρά στη μέση της εικόνας.
Εργαλεία κεντραρίσματος σε cssΟι ιδιότητες CSS που έχουν σχεδιαστεί για να ευθυγραμμίζουν μπλοκ, κείμενο και περιεχόμενο γραφικών χρησιμοποιούνται πολύ πιο συχνά. Αυτό οφείλεται κυρίως στην ευκολία και την ευελιξία των στυλ υλοποίησης.
Λοιπόν, ας ξεκινήσουμε με την πρώτη ιδιότητα κεντραρίσματος κειμένου - στοίχιση κειμένου.
Λειτουργεί με τον ίδιο τρόπο όπως το align in . Μεταξύ των λέξεων-κλειδιών, μπορείτε να επιλέξετε μία από τη γενική λίστα ή να κληρονομήσετε τα χαρακτηριστικά ενός προγόνου (κληρονομήστε).
Θα ήθελα να σημειώσω ότι στο css3 μπορείτε να ορίσετε 2 ακόμη παραμέτρους: start – ανάλογα με τους κανόνες γραφής κειμένου (από δεξιά προς τα αριστερά ή αντίστροφα) ορίζει τη στοίχιση προς τα αριστερά ή προς τα δεξιά (παρόμοια με την εργασία αριστερά ή δεξιά) και τέλος – το αντίθετο της αρχής (όταν γράφετε κείμενο από αριστερά προς τα δεξιά λειτουργεί ως δεξιά, όταν γράφεται από δεξιά προς τα αριστερά - αριστερά).
div στοίχιση κειμένου ( περίγραμμα: 5 εικονοστοιχεία διπλό κόκκινο, συμπλήρωση: 0 22 εικονοστοιχεία 0 22 εικονοστοιχεία; ) #l (στοίχιση κειμένου: δεξιά; ) #s (στοίχιση κειμένου: τέλος; )
Πρόταση στα δεξιά
Πρόταση που χρησιμοποιεί τέλος
Θα σας πω για ένα μικρό κόλπο. Όταν έχει επιλεγεί το justify, η τελευταία γραμμή μπορεί να κρέμεται μη ελκυστικά από το κάτω μέρος. Για να το τοποθετήσετε, για παράδειγμα, στο κέντρο, μπορείτε να χρησιμοποιήσετε την ιδιότητα text-align-last.
Για να ευθυγραμμίσετε κάθετα το περιεχόμενο του ιστότοπου ή τα κελιά πίνακα, χρησιμοποιήστε την ιδιότητα κατακόρυφη στοίχιση. Παρακάτω έχω περιγράψει τις κύριες λέξεις-κλειδιά του στοιχείου.
| Λέξη-κλειδί | Σκοπός |
| γραμμή βάσης | Καθορίζει την ευθυγράμμιση σε μια προγονική γραμμή, που ονομάζεται γραμμή βάσης. Εάν το αντικείμενο προγονικό δεν έχει μια τέτοια γραμμή, τότε η ευθυγράμμιση πραγματοποιείται κατά μήκος του κάτω περιγράμματος. |
| Μέσης | Το μέσο του μεταλλαγμένου αντικειμένου ευθυγραμμίζεται με τη γραμμή βάσης, στην οποία προστίθεται το πάτωμα ύψους του γονικού στοιχείου. |
| κάτω μέρος | Το κάτω μέρος του επιλεγμένου περιεχομένου προσαρμόζεται στο κάτω μέρος του αντικειμένου κάτω από αυτό. |
| μπλουζα | Παρόμοιο με το κάτω μέρος, αλλά με το πάνω μέρος του αντικειμένου. |
| σούπερ | Κάνει τον εκθέτη χαρακτήρα. |
| υπο | Κάνει το στοιχείο δείκτη. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | κάθετη ευθυγράμμιση FLOWER |
κατακόρυφη στοίχιση div( μέγεθος γραμματοσειράς: 4em; στοίχιση κειμένου: κέντρο; διακόσμηση κειμένου: υπογράμμιση; ) #A(κάθετη στοίχιση: επάνω;) #B(κάθετη στοίχιση: μέση;) #C(κάθετη στοίχιση : super;) #D(κάθετη στοίχιση: υπο;) FLOWER
ΕσοχέςΚαι τέλος φτάνουμε στις εσοχές της παραγράφου. Η γλώσσα CSS χρησιμοποιεί μια ειδική ιδιότητα που ονομάζεται εσοχή κειμένου .
Με τη βοήθειά του μπορείτε να κάνετε τόσο μια κόκκινη γραμμή όσο και μια προεξοχή (πρέπει να καθορίσετε μια αρνητική τιμή).
κείμενο-εσοχή #a ( εσοχή κειμένου: 53 εικονοστοιχεία; ) #β ( εσοχή κειμένου: -43 εικονοστοιχεία; ) div ( φόντο: #FFDAB9; πλάτος: 35%; μέγεθος γραμματοσειράς: 29 εικονοστοιχεία; περιθώριο-αριστερό: 30%; συμπλήρωση -αριστερά: 50 px )
Για να δημιουργήσετε μια κόκκινη γραμμή χρειάζεται να γνωρίζετε μόνο μία παράμετρο.
Αυτή είναι η ιδιότητα απλής εσοχής κειμένου.
