Προσφορά στα δεξιά

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

ντο ΣΕμι ΤΣΧΕΤΙΚΑ ΜΕΠΡΟΣ ΤΗΝ

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

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

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

Τι είναι το DIV

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

transform: translate(50%, 50%);

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

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

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

Transform: translateY(-20%);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Οριζόντια στοίχιση στο κέντρο του μπλοκ / σελίδας

1.1. Εάν το μπλοκ έχει πλάτος:

div (πλάτος: 300 εικονοστοιχεία, περιθώριο: 0 αυτόματα, /*κέντρωμα του στοιχείου οριζόντια εντός του γονικού μπλοκ*/ )

Εάν θέλετε να ευθυγραμμίσετε ένα ενσωματωμένο στοιχείο με αυτόν τον τρόπο, πρέπει να το ρυθμίσετε ώστε να εμφανίζεται: μπλοκ;

1.2. Εάν ένα μπλοκ είναι ένθετο σε ένα άλλο μπλοκ και δεν έχει οριστεί κανένα πλάτος για αυτό:

.wrapper(text-align:center;)

1.3. Εάν το μπλοκ έχει πλάτος και πρέπει να στερεωθεί στο κέντρο του γονικού μπλοκ:

.wrapper (θέση: σχετική; /*ρυθμίστε το γονικό πλαίσιο στη σχετική θέση, ώστε να μπορούμε να τοποθετήσουμε απολύτως το πλαίσιο μέσα σε αυτό αργότερα*/) .box (πλάτος: 400 εικονοστοιχεία; θέση: απόλυτο; αριστερά: 50%; περιθώριο-αριστερό: - 200 px; / *μετατόπιση του μπλοκ προς τα αριστερά κατά μια απόσταση ίση με το μισό του πλάτους του*/ )

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

.wrapper (text-align: center; /*κεντράρετε το περιεχόμενο του μπλοκ*/) εσοχή μεταξύ των μπλοκ*/ )

2. Κάθετη ευθυγράμμιση

2.1. Εάν το κείμενο καταλαμβάνει μία γραμμή, για παράδειγμα, για κουμπιά και στοιχεία μενού:

.button (ύψος: 50 εικονοστοιχεία, ύψος γραμμής: 50 εικονοστοιχεία; )

2.2. Για να ευθυγραμμίσετε ένα μπλοκ κατακόρυφα μέσα στο γονικό μπλοκ:

.wrapper (θέση: σχετική

2.3. Κατακόρυφη στοίχιση ανά τύπο πίνακα:

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

2.4. Εάν το πλαίσιο έχει οριστεί πλάτος και ύψος και πρέπει να κεντραριστεί στο γονικό πλαίσιο:

.wrapper ( θέση: σχετική; ) .box ( ύψος: 100 εικονοστοιχεία; πλάτος: 100 εικονοστοιχεία; θέση: απόλυτη; επάνω: 0; δεξιά: 0; κάτω: 0; αριστερά: 0; περιθώριο: αυτόματη; υπερχείλιση: αυτόματη; /* έως το περιεχόμενο δεν διαδόθηκε */ )

2.5. Απόλυτη τοποθέτηση στο κέντρο της σελίδας/μπλοκ με χρήση μετασχηματισμού CSS3:

εάν το στοιχείο έχει διαστάσεις

div ( πλάτος: 300 px; /*ορίστε το πλάτος του μπλοκ*/ ύψος:100 px; /*ορίστε το ύψος του μπλοκ*/ μετασχηματισμός: translate(-50%, -50%); θέση: απόλυτη; επάνω: 50%; αριστερά: 50% ;)

εάν το στοιχείο δεν έχει διαστάσεις και δεν είναι κενό

h1 ( περιθώριο: 0; μετασχηματισμός: translate (-50%, -50%); θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; )

Φαίνεται ότι δεν υπάρχει τίποτα δύσκολο να ορίσετε μια εικόνα ή ένα κείμενο στο κέντρο του παραθύρου του προγράμματος περιήγησης. Χρησιμοποιούμε την ετικέτα CENTER και όλα μπαίνουν στη θέση τους όπου θέλαμε. Ωστόσο, δεν είναι όλα τόσο απλά. Υπάρχουν τρεις τρόποι για τη στοίχιση στο κέντρο, καθένας από τους οποίους έχει τα δικά του χαρακτηριστικά και διαφορές σε διαφορετικά προγράμματα περιήγησης.

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

Παράδειγμα 4.1. Κεντράρισμα με την ετικέτα CENTER

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

Επίσημα, το CENTER θα πρέπει να χρησιμοποιείται μόνο ως παράμετρος σε άλλες ετικέτες μπλοκ (P, PRE και άλλες). Ωστόσο, στο πρόγραμμα περιήγησης Netscape Navigator 2.0, το CENTER εισήχθη ως αυτόνομη ετικέτα. Αυτή η προσθήκη είχε σκοπό να αφαιρέσει την επιπλέον κατακόρυφη επένδυση που εμφανίζεται όταν χρησιμοποιείτε ετικέτες μπλοκ. Αν αντί για την ετικέτα CENTER το κείμενο τοποθετείται μέσα σε μια παράγραφο (

) , υπάρχει μια πρόσθετη κάθετη εσοχή μεταξύ οριζόντια γραμμήκαι αυτό το κείμενο.

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

) ή χρησιμοποιώντας στυλ. Ωστόσο, αυτή η ετικέτα απέκτησε το δικαίωμα ύπαρξης. Ωστόσο, από την κυκλοφορία της προδιαγραφής HTML 4 W3, η Κοινοπραξία συνέστησε να αποφεύγεται η χρήση της ετικέτας CENTER και το στοιχείο

, όπως φαίνεται στο παράδειγμα 4.2.

Παράδειγμα 4.2. Κεντράρισμα με ετικέτα DIV

---

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

Παράδειγμα 4.3. Κεντράρισμα με Στυλ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

HTML:

CSS:

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

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

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

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

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

HTML:

CSS:

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

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

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

HTML:

CSS:

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

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

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

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

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

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

HTML:

CSS:

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

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

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

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

150 + 150 + 100 = 400

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

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

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

πλωτό div

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

HTML:

CSS:

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

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

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

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

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

συμπέρασμα

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