Τι είναι το DIV

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Επομένως, όταν χρειάζεται να κεντράρετε ένα 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: 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 . Αυτή η μέθοδος είναι πολύ πιο ορθολογική εάν περιέχει μια ποικιλία περιεχομένου, συμπεριλαμβανομένων γραφικών, άλλων ένθετων αντικειμένων, συμπεριλαμβανομένων λιστών πολλαπλών επιπέδων.

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

Ευθυγράμμιση μπλοκ με γνωστά μεγέθη

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

Ευθυγράμμιση με επένδυση

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

Για παράδειγμα, υπάρχει μια εικόνα 200 επί 200 pixel και θέλετε να την κεντράρετε σε ένα μπλοκ 240 επί 300. Μπορούμε να ορίσουμε το ύψος και το πλάτος εξωτερική μονάδα= 200 εικονοστοιχεία και προσθέστε 20 pixel για το πάνω και το κάτω μέρος και 50 για το αριστερό και το δεξί.

Ευθυγράμμιση απόλυτα τοποθετημένων μπλοκ

Εάν το μπλοκ έχει οριστεί σε " θέση: απόλυτη", τότε μπορεί να τοποθετηθεί σε σχέση με τον πλησιέστερο γονέα με "θέση: σχετική". Για αυτό, όλες οι ιδιότητες (" μπλουζα","σωστά","κάτω μέρος","αριστερά") του εσωτερικού μπλοκ για να εκχωρήσετε την ίδια τιμή, καθώς και το "margin: auto".

*Υπάρχει μια απόχρωση: Το πλάτος (ύψος) του εσωτερικού μπλοκ + η τιμή του αριστερού (δεξιά, κάτω, πάνω) δεν πρέπει να υπερβαίνει το μέγεθος του γονικού μπλοκ. Είναι ασφαλέστερο να ορίσετε τις ιδιότητες αριστερά (δεξιά, κάτω, πάνω) στο 0 (μηδέν).

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

Ευθυγράμμιση με "text-align: center"

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

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

Αξίζει να σημειωθεί ότι αυτή η ιδιότητα θα λειτουργεί όχι μόνο για κείμενο, αλλά και για τυχόν ενσωματωμένα στοιχεία ("display: inline").

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

Ευθυγράμμιση μπλοκ με περιθώρια

Στοιχεία σε επίπεδο μπλοκ με γνωστό πλάτος ευθυγραμμίζονται εύκολα οριζόντια ορίζοντας τα σε "margin-left: auto; margin-right: auto". Συνήθως χρησιμοποιείται η συντομογραφία: " περιθώριο: 0 αυτόματο" (αντί για μηδέν, μπορεί να υπάρχει οποιαδήποτε τιμή). Αλλά για κάθετη στοίχιση, αυτή η μέθοδος δεν θα λειτουργήσει.

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

Κατακόρυφη στοίχιση

ΑΠΟ κατακόρυφη στοίχισηπολλά περισσότερα προβλήματα - προφανώς, αυτό δεν προβλεπόταν στο CSS. Υπάρχουν διάφοροι τρόποι για να πετύχετε το επιθυμητό αποτέλεσμα, αλλά δεν είναι όλοι πολύ όμορφοι.

Ευθυγράμμιση με την ιδιότητα line-height

Στην περίπτωση που υπάρχει μόνο μία γραμμή στο μπλοκ, μπορείτε να επιτύχετε την κατακόρυφη ευθυγράμμισή του εφαρμόζοντας το " ύψος γραμμής" και ρυθμίστε το στο επιθυμητό ύψος. Για να είστε ασφαλείς, θα πρέπει επίσης να ορίσετε το "height", η τιμή του οποίου θα είναι ίση με την τιμή "line-height", επειδή το τελευταίο δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης.

Είναι επίσης δυνατή η ευθυγράμμιση ενός μπλοκ με πολλές γραμμές. Για να το κάνετε αυτό, θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο μπλοκ περιτυλίγματος και να ορίσετε το ύψος της γραμμής σε αυτό. Το εσωτερικό μπλοκ μπορεί να είναι πολλαπλών γραμμών, αλλά πρέπει να είναι "ενσωματωμένο". Πρέπει να εφαρμόσετε το "vertical-align: middle" σε αυτό.

Το μπλοκ περιτυλίγματος πρέπει να έχει οριστεί "μέγεθος γραμματοσειράς: 0". Εάν δεν ορίσετε το μέγεθος της γραμματοσειράς στο μηδέν, τότε το πρόγραμμα περιήγησης θα προσθέσει μερικά επιπλέον pixel από τον εαυτό του. Θα πρέπει επίσης να καθορίσετε το μέγεθος γραμματοσειράς και το ύψος γραμμής για το εσωτερικό μπλοκ, επειδή αυτές οι ιδιότητες κληρονομούνται από το γονικό.

Κάθετη στοίχιση σε πίνακες

ιδιοκτησία" κατακόρυφη ευθυγράμμιση" επηρεάζει επίσης τα κελιά πίνακα. Με την τιμή "μέση", το περιεχόμενο μέσα στο κελί κεντράρεται. Φυσικά, η διάταξη πίνακα θεωρείται αρχαϊκή στις μέρες μας, αλλά σε εξαιρετικές περιπτώσεις μπορεί να προσομοιωθεί προσδιορίζοντας " οθόνη: πίνακας-κελί".

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

Θα πρέπει να θυμόμαστε ότι εάν το στοιχείο έχει ένα σύνολο "float" εκτός από "κανένα", τότε θα έχει σχήμα μπλοκ (εμφάνιση: μπλοκ) ούτως ή άλλως - τότε θα πρέπει να χρησιμοποιήσετε ένα πρόσθετο περιτύλιγμα μπλοκ.

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

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

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

Οθόνη: ευθυγράμμιση και ευθυγράμμιση

Εάν δεν ενδιαφέρεστε πολύ για τους χρήστες του Explorer 8 ή σας ενδιαφέρουν τόσο πολύ που είστε πρόθυμοι να τους βάλετε ένα επιπλέον javascript, τότε μπορεί να χρησιμοποιηθεί το "display: flex". Τα Flex box χειρίζονται πολύ καλά τα ζητήματα ευθυγράμμισης και αρκεί να γράψετε "margin: auto" για να κεντράρετε το περιεχόμενο μέσα.

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

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

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

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

Τι να επιλέξετε ή μεθόδους

Υπάρχουν διάφοροι τρόποι για να τακτοποιήσετε δομικά στοιχεία σε μια σειρά σε οριζόντιο επίπεδο. πιο χρήσιμο από την άποψη του Πρακτική εφαρμογη, είναι:

• Μέθοδος «Float».
• Μέθοδος "Inline block".
• μέθοδος πίνακα κελιών

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

«Για ένα τράνταγμα» ή μια μικρή θεωρία

Όλα δομικά στοιχεία HTMLμπορεί να χωριστεί υπό όρους σε:

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

ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ– καταλαμβάνοντας ολόκληρο το πλάτος του γονικού μπλοκ, ξεκινήστε πάντα με νέα γραμμή – p, h, div.

Ένα ενδεικτικό παράδειγμα δομών inline και block φαίνεται παρακάτω:

Μέθοδος επίπλευσης

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

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

Ιδιότητα CSS φλοτέραπέκτησε μεγάλη δημοτικότητα και πρακτική αξία μετά τη μετάβαση από τη διάταξη πίνακα σε διάταξη μπλοκ.

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

Για παράδειγμα, ας δημιουργήσουμε τέσσερα μπλοκ που πρέπει να τοποθετηθούν σε μια σειρά:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Χτίζουμε < div class = "bblock" >οριζόντιος < div class = "bblock" >σειρά < div class = "bblock" >από ντίβες

Και ένα εξωτερικό φύλλο στυλ με το ακόλουθο περιεχόμενο:

div(float:αριστερά; /*Σετ περιτύλιξης*/Ύψος γραμμής: 120 px; μέγεθος γραμματοσειράς: 40 px; φόντο: Dodgeblue? άσπρο χρώμα; περιθώριο: 60 px; πλάτος: 320 px /*Διόρθωση του πλάτους του μπλοκ*/ }

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

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

float:right;

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

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

< div style= "clear: both;" >

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

Ο αλγόριθμος των ενεργειών είναι ο ακόλουθος.

< div class = "wrap" > < div class = "bblock" >Χτίζουμε < div class = "bblock" >οριζόντιος < div class = "bblock" >σειρά < div class = "bblock" >από ντίβες

wrap(πλάτος: 1310px; /*διορθώστε το πλάτος του περιτυλίγματος*/περιθώριο: 0 αυτόματο; /*center it*/ background: darkgray; ύψος: 120 px; /*Ρυθμίστε το ύψος του περιτυλίγματος*/) . μπλοκ (float: αριστερά; /*Σετ περιτύλιξης*/Ύψος γραμμής: 120 px; /*Ύψος σειράς + vert. κεντραρισμα κειμενου*/μέγεθος γραμματοσειράς: 40 px; φόντο: Dodgeblue? άσπρο χρώμα; πλάτος: 320 px /*Διόρθωση του πλάτους του μπλοκ*/ margin-right: 10px; text-align: κέντρο; /*Κεντράρετε το κείμενο οριζόντια*/) . wrap : last-child ( περιθώριο-δεξιά: 0px; /*Κατάργηση του περιθωρίου του τελευταίου div*/ }

Ως αποτέλεσμα, έχουμε την ακόλουθη εικόνα:

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

Σπουδαίος!!!

Ενσωματωμένη μέθοδος μπλοκ

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

Γνωρίστε το highlight του προγράμματος - ιδιοκτησίας οθόνη: inline-block.

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

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

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

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

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Ο σύνδεσμος του μενού 1 είναι μεγαλύτερος από το συνηθισμένο < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Σύνδεσμος μενού 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Σύνδεσμος μενού 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Σύνδεσμος μενού 4

Nav ( οθόνη: inline-block; /*Ορισμός εμφάνισης γραμμής μπλοκ*/πλάτος: 180 px /*ορισμός πλάτους μπλοκ*/φόντο: Dodgeblue? ) . string(text-align: center; /*Στοίχιση του κειμένου οριζόντια*/ }

Ως αποτέλεσμα, έχουμε το ακόλουθο μενού:

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

κατακόρυφη ευθυγράμμιση: επάνω;

Η γραμμή πλοήγησής μας είναι πλέον ευθυγραμμισμένη στην επάνω γραμμή:

Φυσικά, το παράδειγμα που δίνεται είναι πρωτόγονο, αλλά είμαι σίγουρος ότι με βάση αυτό μπορείτε να δημιουργήσετε ένα πραγματικό αριστούργημα!!!

Σπουδαίος!!!

• Για τους αρχαίους εκδόσεις του Firefoxπροσθέστε μια γραμμή:
  

  οθόνη: -moz-inline-stack;

  
  και τυλίξτε το στοιχείο σε ένα πρόσθετο περιτύλιγμα div.
• IE 7 και παλαιότερες εκδόσεις - προσθέστε γραμμές:
  

  ζουμ: 1 /*set hasLayout*/ * οθόνη: inline; /*αστερίσκος - hack για IE */ _ύψος: 250 px; /*min-height δεν λειτουργεί στο IE6*/

• Σημειώνω ότι συγκεκριμένα προγράμματα περιήγησης αντιδρούν επιλεκτικά σε αυτές τις γραμμές (Firefox στην πρώτη, IE στις υπόλοιπες).

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

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

Ιδιότητες οθόνη: πίνακας (κελί πίνακα, ενσωματωμένος πίνακας), σας επιτρέπει να εκτελείτε μορφοποίηση στοιχείων σε πίνακα χωρίς εφαρμογές HTMLτραπέζια.

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

< div class = "wrap" > < div class = "bblock" >Χτίζουμε < div class = "bblock" >πινακοειδής < div class = "bblock" >σειρά < div class = "bblock" >από ντίβες

Bblock ( οθόνη: κελί πίνακα, μέγεθος γραμματοσειράς: 32 εικονοστοιχεία, πλάτος: 200 εικονοστοιχεία, ύψος: 200 εικονοστοιχεία, φόντο: χρυσό, στοίχιση κειμένου: κέντρο, κατακόρυφη στοίχιση: μέση, ) . περιτύλιξη (οθόνη: πίνακας, διάστιχο: 20 εικονοστοιχεία 20 εικονοστοιχεία, χρώμα φόντου: σκούρο γκρι, )

Σπουδαίος!!!

1. Σε αντίθεση με τις μεθόδους "inline-block" και "float", όταν μειώνεται το πλάτος του παραθύρου του προγράμματος περιήγησης, τα κελιά δεν μετακινούνται προς τα κάτω.
2. Δεν έχετε τη δυνατότητα να ορίσετε την ιδιότητα περιθωρίου για κελιά ψευδο-πίνακα.
3. Cross browser. Οι ιδιότητες από την οθόνη: οικογένεια πίνακα* δεν υποστηρίζονται από τα IE6, IE7. Επίσης, στον IE8, ενδέχεται να δείτε ένα σφάλμα δυναμικής απόδοσης για στοιχεία ψευδο-πίνακα ως τυχαία εξαφανιζόμενα κελιά. Αυτό το σφάλμαπιο συχνά εκδηλώνεται κατά την αρχική σχεδίαση του εγγράφου

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

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

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

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

Όσο για την επικύρωση αυτός ο όροςπεριγράφεται λεπτομερώς στο άρθρο ""), τότε η ίδια η προδιαγραφή html καταδικάζει τη χρήση < κέντρο>, αφού για εγκυρότητα είναι απαραίτητη η χρήση μεταβατικού DOCTYPE>.