Κεντράρετε το στοιχείο στη σελίδα css. Ένας πλήρης οδηγός για το κεντράρισμα ενός στοιχείου DIV

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

Πιθανότατα, γνωρίζετε ήδη την ύπαρξη της υπέροχης ιδιότητας CSS vertical-align. Και ο ίδιος ο Θεός μας διέταξε να χρησιμοποιήσουμε ακριβώς αυτήν την ιδιότητα για κάθετη ευθυγράμμιση (δεν είναι τυχαίο που έχει ένα τόσο αυτονόητο όνομα).

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

Τώρα ας αρχίσουμε να λύνουμε το πρόβλημα.

Και έτσι, έχουμε ένα μπλοκ, το ύψος του μπορεί να αλλάξει:

Αποκλεισμός περιεχομένου

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

Αποκλεισμός περιεχομένου

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

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

Όσον αφορά τη στοίχιση μέσα σε ένα κελί πίνακα, νομίζω ότι όλα είναι ξεκάθαρα. Αλλά θα εξηγήσω μια άλλη περίπτωση με ενσωματωμένα στοιχεία.

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

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

Ένα κομμάτι κειμένου σας καλωσορίζει!

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

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

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

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

Για δοχεία Εφαρμόστε τις ακόλουθες ιδιότητες CSS:

#perviy( vertical-align:sub; ) #vtoroy( vertical-align:3px; ) #tretiy( vertical-align:-3px; )

Η γραμμή κειμένου που προκύπτει θα μοιάζει με αυτό:

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

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

Κατακόρυφη ευθυγράμμιση σε δοχείο div

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

Πώς μπορούμε να το χρησιμοποιήσουμε αυτό; Δεν έχουμε τραπέζι, δουλεύουμε με δοχείο div.

Χα, αποδεικνύεται πολύ απλό.

Η ιδιότητα εμφάνισης CSS μας επιτρέπει να μετατρέψουμε το μπλοκ div μας σε κελί πίνακα, αυτό μπορεί να γίνει εύκολα και φυσικά:

Ας πούμε ότι έχουμε ένα class div στοίχιση κειμένου:

Αποκλεισμός περιεχομένου

Για αυτό το μπλοκ καθορίζουμε την ακόλουθη ιδιότητα CSS:

Textalign (εμφάνιση: κελί πίνακα; )

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

Ωστόσο, όλα δεν μπορούν να τελειώσουν τόσο απλά. Έχουμε ένα υπέροχο πρόγραμμα περιήγησης IE. Δεν ξέρει πώς να συνεργαστεί με το ακίνητο οθόνη: πίνακας-κελί(Σας προτείνω να διαβάσετε τον πίνακα που δείχνει τη λειτουργικότητα αυτής της ιδιότητας CSS σε διαφορετικά προγράμματα περιήγησης στον ιστότοπο htmlbook.ru). Επομένως, θα πρέπει να καταφύγουμε σε διάφορα κόλπα.

Υπάρχουν πολλοί τρόποι για να επιτευχθεί ευθυγράμμιση σε ένα κοντέινερ div για όλα τα προγράμματα περιήγησης:

• Μέθοδος με χρήση πρόσθετου βοηθητικού δοχείου div
• Μέθοδος που χρησιμοποιεί έκφραση. Συνδέεται με έναν δύσκολο υπολογισμό των υψών του μπλοκ. Δεν μπορείτε να το κάνετε αυτό χωρίς γνώση JavaScript.
• Χρήση της ιδιότητας line-height. Αυτή η μέθοδος είναι κατάλληλη μόνο για κατακόρυφη ευθυγράμμιση σε μπλοκ γνωστού ύψους και επομένως δεν εφαρμόζεται στη γενική περίπτωση.
• Χρήση απόλυτης και σχετικής μετατόπισης περιεχομένου σε περίπτωση προγράμματος περιήγησης IE. Αυτή η μέθοδος μου φαίνεται η πιο κατανοητή και απλή. Επιπλέον, μπορεί να εφαρμοστεί για δοχεία div μεταβλητού ύψους. Θα σταθούμε σε αυτό με περισσότερες λεπτομέρειες.

Όπως καταλαβαίνετε, πρέπει απλώς να λύσουμε το πρόβλημα της κάθετης ευθυγράμμισης στο IE που σχετίζεται με την παρεξήγηση της ιδιοκτησίας οθόνη: πίνακας-κελί(ούτε ο IE6, ούτε ο IE7 ούτε ο IE8 είναι εξοικειωμένοι με αυτήν την ιδιότητα). Επομένως, χρησιμοποιώντας ένα υπό όρους σχόλιο ειδικά για προγράμματα περιήγησης της οικογένειας IE, θα υποδείξουμε άλλες ιδιότητες CSS.

Σχόλιο υπό όρους

Τύπος κατασκευής:

... Οδηγίες που ισχύουν μόνο αν ισχύει η συνθήκη σε αγκύλες...

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

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

Έτσι, χρησιμοποιώντας ένα υπό όρους σχόλιο, μπορούμε να αποκρύψουμε ένα κομμάτι κώδικα από όλα τα προγράμματα περιήγησης εκτός από το IE.

Η λύση του προβλήματος

Εξαιτίας αυτού του μαϊντανού, θα χρειαστεί να παρέχουμε τον κώδικα HTML μας με δύο επιπλέον δοχεία. Έτσι θα μοιάζει το μπλοκ κειμένου μας:

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

Για κατηγορία κοντέινερ div στοίχιση κειμένουΟρίζονται ιδιότητες CSS που ευθυγραμμίζουν το περιεχόμενό του κατακόρυφα για όλα τα κανονικά προγράμματα περιήγησης (εκτός από το IE, φυσικά):

Εμφάνιση: πίνακας-κελί; κατακόρυφη ευθυγράμμιση: μέση;

Και δύο ακόμη ιδιότητες που ορίζουν το πλάτος και το ύψος για το μπλοκ:

Πλάτος: 500 px; ύψος: 500 px;

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

Τώρα αρχίζουμε να προσθέτουμε ιδιότητες που σχετίζονται με τη στοίχιση για προγράμματα περιήγησης της οικογένειας IE (για αυτούς χρησιμοποιήσαμε πρόσθετα μπλοκ divΚαι σπιθαμή):

Αναφερόμενος στην ετικέτα divμέσα σε ένα μπλοκ τάξης στοίχιση κειμένου. Για να το κάνετε αυτό, πρέπει πρώτα να υποδείξετε το όνομα της κλάσης και, στη συνέχεια, διαχωρισμένα με κενό διάστημα, την ετικέτα στην οποία έχουμε πρόσβαση.

Textalign div(θέση: απόλυτη; κορυφή: 50%; )

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

Αντίστοιχα, τα στυλ που καθορίζονται για το μπλοκ στοίχιση κειμένουτροποποιούνται:

Textalign( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση, πλάτος: 500 εικονοστοιχεία, ύψος: 500 εικονοστοιχεία, θέση: σχετική, )

Τώρα το επάνω αριστερό σημείο του μπλοκ κειμένου μετακινείται προς τα κάτω κατά 50%.

Για να εξηγήσω τι συμβαίνει, σχεδίασα μια εικόνα:

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

Τώρα η ετικέτα θα μπει στο παιχνίδι σπιθαμήκαι η σχετική του θέση:

Textalign span (θέση: σχετική; επάνω: -50%; )

Έτσι, έχουμε μετατοπίσει το κίτρινο μπλοκ προς τα πάνω κατά 50% του ύψους του, σε σχέση με την αρχική του θέση. Όπως καταλαβαίνετε, το ύψος του κίτρινου μπλοκ είναι ίσο με το ύψος του κεντρικού περιεχομένου. Και η τελευταία λειτουργία στο δοχείο ανοίγματος τοποθέτησε το περιεχόμενό μας στη μέση του μωβ μπλοκ. Ζήτω!

Ας κοροϊδέψουμε λίγο

Πρώτα απ 'όλα, πρέπει να κρύψουμε τον μαϊντανό από όλα τα κανονικά προγράμματα περιήγησης και να τον ανοίξουμε για IE. Αυτό μπορεί να γίνει, φυσικά, χρησιμοποιώντας ένα υπό όρους σχόλιο.

.textalign div( θέση: απόλυτη; επάνω: 50%; ) .textalign span( θέση: σχετική; κορυφή: -50%; )

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

Λύση στο πρόβλημα: πρέπει να προσθέσετε μια ιδιότητα υπερχείλιση: κρυφόςΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στοίχιση κειμένου.

Γνωρίστε το ακίνητο αναλυτικά ξεχείλισμαδυνατό σε .

Οι τελικές οδηγίες CSS για το μπλοκ στοίχιση κειμένουέχει τη μορφή:

Textalign( οθόνη: πίνακας-κελί, κατακόρυφη στοίχιση: μέση, πλάτος: 500 εικονοστοιχεία, ύψος: 500 εικονοστοιχεία, θέση: σχετική, υπερχείλιση: κρυφή, περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο, )

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

Κεντράρισμα σε μπλοκ μεταβλητού ύψους

Πολύ συχνά υπάρχει ανάγκη να ορίσετε το ύψος ενός μπλοκ κλάσης στοίχιση κειμένουόχι σε pixel, αλλά ως ποσοστό του ύψους του γονικού μπλοκ και ευθυγραμμίστε τα περιεχόμενα του κοντέινερ div στη μέση.

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

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

Για να εφαρμόσουμε ένα μπλοκ μεταβλητού ύψους στο παράδειγμά μας, θα επεξεργαστούμε λίγο το CSS:

Στην τάξη στοίχιση κειμένουθα αλλάξουμε την αξία του ακινήτου απεικόνισηΜε πίνακα-κελίεπί τραπέζικαι καταργήστε την οδηγία ευθυγράμμισης κατακόρυφη ευθυγράμμιση: μέση. Τώρα μπορούμε να αλλάξουμε με ασφάλεια την τιμή ύψους από 500 pixel σε, για παράδειγμα, 100%.

Έτσι οι ιδιότητες CSS για το μπλοκ κλάσης στοίχιση κειμένουθα μοιάζει με αυτό:

Textalign( οθόνη: πίνακας, πλάτος: 500 εικονοστοιχεία, ύψος: 100%, θέση: σχετική, υπερχείλιση: κρυφή, περίγραμμα: 1 εικονοστοιχείο συμπαγές μαύρο, )

Το μόνο που μένει είναι να εφαρμοστεί το κεντράρισμα περιεχομένου. Για να γίνει αυτό, ένα κοντέινερ div τοποθετήθηκε σε ένα μπλοκ κλάσης στοίχιση κειμένου(αυτό είναι το ίδιο κίτρινο μπλοκ στην εικόνα), πρέπει να ορίσετε την ιδιότητα CSS οθόνη: πίνακας-κελί, τότε θα κληρονομήσει το ύψος του 100% από το γονικό μπλοκ στοίχιση κειμένου(μωβ μπλοκ). Και τίποτα δεν θα μας εμποδίσει να ευθυγραμμίσουμε τα περιεχόμενα του ένθετου δοχείου div στο κέντρο με την ιδιότητα κατακόρυφη ευθυγράμμιση: μέση.

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

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

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

Για περισσότερες πληροφορίες σχετικά με την κατακόρυφη ευθυγράμμιση ενός μπλοκ μεταβλητού ύψους, βλ.

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

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

Html και οι απόγονοί του και ευθυγραμμίστε

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

Όσον αφορά την επικύρωση (αυτός ο όρος περιγράφεται λεπτομερώς στο άρθρο ""), η ίδια η προδιαγραφή 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 )

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

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

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

Με εκτίμηση, Roman Chueshov

Διαβάστηκε: 675 φορές

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

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

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

CSS - Στοίχιση στο κέντρο

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

... ...

Γονέας ( θέση: σχετική; ) .child ( θέση: απόλυτη; αριστερά: 50%; επάνω: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%);

• Chrome 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10,5+
• Safari 3.1+

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

Γονέας ( θέση: σχετική; ) .παιδί ( θέση: απόλυτη; αριστερά: 50%; επάνω: 50%; /* πλάτος και ύψος 2 μπλοκ */ πλάτος: 500 εικονοστοιχεία; ύψος: 250 εικονοστοιχεία; /* Οι τιμές καθορίζονται ανάλογα στο μέγεθός του */ /* margin-left = - πλάτος / 2 */ margin-left: -250px /* margin-top = - height / 2 */ margin-top: -125px )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

Γονέας ( θέση: συγγενής; ) .παιδί (θέση: απόλυτη; /* πλάτος και ύψος 2 μπλοκ σε % */ ύψος: 50%; πλάτος: 50%; /* Οι τιμές καθορίζονται ανάλογα με το μέγεθός του σε % * / αριστερά: 25% /* (100% - πλάτος) / 2 */ επάνω: 25% /* (100% - ύψος) / 2 */

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

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

1. Ευθυγράμμιση ενός στοιχείου μπλοκ (οθόνη: μπλοκ) σε σχέση με ένα άλλο (στο οποίο βρίσκεται) οριζόντια:

... ...

Αποκλεισμός (περιθώριο-αριστερά: αυτόματο; περιθώριο-δεξιά: αυτόματο; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

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

... ...

Γονέας (στοίχιση κειμένου: κέντρο; ) .child ( οθόνη: inline-block; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Κάθετη στοίχιση

1. Κεντράρετε ένα στοιχείο (οθόνη: inline, οθόνη: inline-block) σε σχέση με το άλλο (στο οποίο βρίσκεται) στο κέντρο. Το γονικό μπλοκ σε αυτό το παράδειγμα έχει ένα σταθερό ύψος, το οποίο ορίζεται χρησιμοποιώντας την ιδιότητα CSS line-height.

... ...

Γονικός (ύψος γραμμής: 500 εικονοστοιχεία; ) .child ( οθόνη: inline-block; κατακόρυφη στοίχιση: μέση; )

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

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

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

Προγράμματα περιήγησης που υποστηρίζουν αυτήν τη λύση:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7,5+
• Safari 1.0+

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

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

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

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

• τραπέζια,
• εσοχή,
• ύψος γραμμής
• τέντωμα,
• αρνητικό περιθώριο,
• μεταμορφώνω
• ψευδοστοιχείο
• flexbox.

Για να το καταλάβετε, εξετάστε το ακόλουθο παράδειγμα.

Υπάρχουν δύο στοιχεία div, με το ένα από αυτά να είναι φωλιασμένο μέσα στο άλλο. Ας τους δώσουμε τις αντίστοιχες τάξεις - εξωτερικές και εσωτερικές.

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

Αρχικά, ας εξετάσουμε την περίπτωση που είναι γνωστές οι διαστάσεις των εξωτερικών και εσωτερικών μπλοκ. Ας προσθέσουμε την εμφάνιση κανόνων: inline-block στο εσωτερικό στοιχείο, και text-align: κέντρο και κάθετη στοίχιση: από τη μέση στο εξωτερικό στοιχείο.

Να θυμάστε ότι η στοίχιση ισχύει μόνο για στοιχεία που έχουν λειτουργία εμφάνισης inline ή inline-block.

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

Εξωτερικό ( πλάτος: 200 εικονοστοιχεία; ύψος: 200 εικονοστοιχεία; στοίχιση κειμένου: κέντρο; κατακόρυφη στοίχιση: μέση; χρώμα φόντου: #ffc; ) .inner ( οθόνη: inline-block; πλάτος: 100 px; ύψος: 100 px; χρώμα φόντου : #fcc;
Αφού εφαρμόσουμε τα στυλ, θα δούμε ότι το εσωτερικό μπλοκ είναι ευθυγραμμισμένο οριζόντια, αλλά όχι κάθετα:
http://jsfiddle.net/c1bgfffq/

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

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

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

http://jsfiddle.net/c1bgfffq/1/

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

Το πρώτο μείον μπορεί να αφαιρεθεί εν μέρει αντικαθιστώντας τις ετικέτες πίνακα και td με div και ρυθμίζοντας τη λειτουργία εμφάνισης πίνακα σε CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Ωστόσο, το εξωτερικό μπλοκ θα παραμείνει τραπέζι με όλες τις επακόλουθες συνέπειες.

Ευθυγράμμιση με χρήση εσοχών Εάν τα ύψη του εσωτερικού και του εξωτερικού μπλοκ είναι γνωστά, τότε η ευθυγράμμιση μπορεί να οριστεί χρησιμοποιώντας τις κάθετες εσοχές του εσωτερικού μπλοκ χρησιμοποιώντας τον τύπο: (H εξωτερικό – H εσωτερικό) / 2.

Εξωτερικό ( ύψος: 200 px; ) .inner (ύψος: 100 px; περιθώριο: 50 px 0; )
http://jsfiddle.net/c1bgfffq/6/

Το μειονέκτημα της λύσης είναι ότι εφαρμόζεται μόνο σε περιορισμένο αριθμό περιπτώσεων όταν τα ύψη και των δύο μπλοκ είναι γνωστά.

Ευθυγράμμιση με ύψος γραμμής Εάν γνωρίζετε ότι το εσωτερικό μπλοκ δεν πρέπει να καταλαμβάνει περισσότερες από μία γραμμές κειμένου, τότε μπορείτε να χρησιμοποιήσετε την ιδιότητα line-height και να την ορίσετε ίσο με το ύψος του εξωτερικού μπλοκ. Δεδομένου ότι το περιεχόμενο του εσωτερικού μπλοκ δεν πρέπει να τυλίγεται στη δεύτερη γραμμή, συνιστάται να προσθέσετε επίσης το κενό διάστημα: nowrap και υπερχείλιση: κρυφοί κανόνες.

Εξωτερικό ( ύψος: 200 εικονοστοιχεία; ύψος γραμμής: 200 εικονοστοιχεία; ) .εσωτερικό ( λευκό διάστημα: nowrap; υπερχείλιση: κρυφό; )
http://jsfiddle.net/c1bgfffq/12/

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

Εξωτερικό ( ύψος: 200 εικονοστοιχεία, ύψος γραμμής: 200 εικονοστοιχεία; ) .εσωτερικό ( ύψος γραμμής: κανονικό, οθόνη: ενσωματωμένο μπλοκ, κατακόρυφη στοίχιση: μέση; )
http://jsfiddle.net/c1bgfffq/15/

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

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

Για να το κάνετε αυτό χρειάζεστε:

ορίστε τη σχετική τοποθέτηση στο εξωτερικό μπλοκ και την απόλυτη τοποθέτηση στο εσωτερικό μπλοκ.

προσθέστε τους κανόνες πάνω: 0 και κάτω: 0 στο εσωτερικό μπλοκ, με αποτέλεσμα να εκτείνεται σε όλο το ύψος του εξωτερικού μπλοκ.

ρυθμίστε την κατακόρυφη επένδυση του εσωτερικού μπλοκ σε αυτόματη.

.εξωτερικό (θέση: σχετική; ) .εσωτερικό (ύψος: 100 px; θέση: απόλυτη; επάνω: 0; κάτω: 0; περιθώριο: αυτόματο 0; )
http://jsfiddle.net/c1bgfffq/4/

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

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

Πρέπει να ρυθμίσετε το εξωτερικό μπλοκ σε σχετική θέση και το εσωτερικό μπλοκ σε απόλυτη θέση. Στη συνέχεια, πρέπει να μετακινήσετε το εσωτερικό μπλοκ προς τα κάτω κατά το ήμισυ του ύψους της εξωτερικής κορυφής του μπλοκ: 50% και να το ανυψώσετε κατά το ήμισυ του δικού του ύψους περιθώριο-κορυφή: -H εσωτερικό / 2.

Εξωτερικό ( θέση: σχετική; ) .εσωτερικό (ύψος: 100 px; θέση: απόλυτη; επάνω: 50%; περιθώριο-πάνω: -50 px; )
http://jsfiddle.net/c1bgfffq/13/

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

Στοίχιση με χρήση μετασχηματισμού Αυτή η μέθοδος είναι παρόμοια με την προηγούμενη, αλλά μπορεί να χρησιμοποιηθεί όταν το ύψος του εσωτερικού μπλοκ είναι άγνωστο. Σε αυτήν την περίπτωση, αντί να ορίσετε μια συμπλήρωση αρνητικού pixel, μπορείτε να χρησιμοποιήσετε την ιδιότητα μετασχηματισμού και να μετακινήσετε το εσωτερικό μπλοκ προς τα πάνω χρησιμοποιώντας τη συνάρτηση translateY και μια τιμή -50% .

Εξωτερική ( θέση: σχετική; ) .inner (θέση: απόλυτη; επάνω: 50%; μετασχηματισμός: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Γιατί ήταν αδύνατο να οριστεί η τιμή ως ποσοστό στην προηγούμενη μέθοδο; Εφόσον οι τιμές ποσοστιαίων περιθωρίων υπολογίζονται σε σχέση με το μητρικό στοιχείο, μια τιμή 50% θα ήταν το μισό του ύψους του εξωτερικού κουτιού και θα χρειαστεί να αυξήσουμε το εσωτερικό κουτί στο μισό του ύψους του. Η ιδιότητα μετασχηματισμού είναι ιδανική για αυτό.

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

Ευθυγράμμιση με το Flexbox Ο πιο σύγχρονος τρόπος κάθετης ευθυγράμμισης είναι η χρήση του Flexible Box Layout (γνωστό ευρέως ως Flexbox). Αυτή η ενότητα σάς επιτρέπει να ελέγχετε με ευελιξία τη θέση των στοιχείων στη σελίδα, τακτοποιώντας τα σχεδόν οπουδήποτε. Η στοίχιση στο κέντρο για το Flexbox είναι μια πολύ απλή εργασία.

Το εξωτερικό μπλοκ πρέπει να ρυθμιστεί ώστε να εμφανίζει: flex και το εσωτερικό μπλοκ στο περιθώριο: auto . Και είναι όλο! Όμορφο, έτσι δεν είναι;

Εξωτερική ( οθόνη: flex; πλάτος: 200px; ύψος: 200px; ) .inner (πλάτος: 100px; περιθώριο: auto; )
http://jsfiddle.net/c1bgfffq/14/

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

Ποια μέθοδο να επιλέξω; Πρέπει να ξεκινήσετε από τη δήλωση προβλήματος:

• Για κάθετη στοίχιση κειμένου, είναι προτιμότερο να χρησιμοποιείτε κάθετες εσοχές ή την ιδιότητα line-height.
• Για απολύτως τοποθετημένα στοιχεία με γνωστό ύψος (για παράδειγμα, εικονίδια), η μέθοδος με την ιδιότητα αρνητικού περιθωρίου κορυφής είναι ιδανική.
• Για πιο σύνθετες περιπτώσεις, όταν το ύψος του μπλοκ είναι άγνωστο, πρέπει να χρησιμοποιήσετε ένα ψευδοστοιχείο ή την ιδιότητα μετασχηματισμού.
• Λοιπόν, εάν είστε τόσο τυχεροί που δεν χρειάζεται να υποστηρίζετε παλαιότερες εκδόσεις του προγράμματος περιήγησης IE, τότε, φυσικά, είναι καλύτερο να χρησιμοποιήσετε το Flexbox.

Ετικέτες: Προσθήκη ετικετών

Αν κόψετε σε οποιονδήποτε ιστότοπο που δημιουργήθηκε με βάση 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 )

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

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

σύνταξη εμφάνισης:
εμφάνιση: μπλοκ | εν σειρά | inline-block | ενσωματωμένος πίνακας | στοιχείο λίστας | κανένα | τρέξιμο | τραπέζι | λεζάντα πίνακα | κελί πίνακα | πίνακας-στήλη-ομάδα | πίνακας-στήλη | τραπέζι-υποδοχή-ομάδα | πίνακας-κεφαλίδα-ομάδα | πίνακας-σειρά | πίνακας-σειρά-ομάδα

Όπως μπορείτε να δείτε, αυτή η ιδιότητα μπορεί να λάβει πολλές τιμές. Επομένως είναι πολύ χρήσιμο και μπορεί να χρησιμοποιηθεί για την τοποθέτηση στοιχείων. Σε ένα από τα προηγούμενα παραδείγματα, χρησιμοποιήσαμε μία από τις τιμές του (inline-block ) για να κεντράρουμε ένα div μέσα σε ένα div.

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