Με επίκεντρο: CSS-layout

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

Στοίχιση κειμένου στο κέντρο

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

• text-align: center?

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

σελίδες συχνά ευθυγράμμιση χαρακτηριστικό για τον εαυτό του την ετικέτα. Το γεγονός αυτό καθιστά αμέσως ο κωδικός άκυρη, δεδομένου ότι το W3C αναγνώρισε align χαρακτηριστικό παρωχημένη. Χρησιμοποιώντας το σε μια σελίδα δεν συνιστάται.

Με επίκεντρο το μπλοκ

Αν θέλετε να ρυθμίσετε την ευθυγράμμιση του div στη μέση, CSS μπορεί να προσφέρει αρκετά άνετο τρόπο: τη χρήση εξωτερικών περιθώριο padding. Παραγέμισμα μπορεί να καθοριστεί ως τα στοιχειώδη τεμάχια, και η γραμμή-μπλοκ. αξίας Svoysva θα πρέπει να είναι 0 (κάθετη padding), και αυτόματη (αυτόματη εσοχή οριζόντια):

• margin: 0 auto?

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

Ευθυγράμμιση του αριστερό ή δεξί άκρο του μπλοκ

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

• .left {float: αριστερά?}
• .right {float: right}

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

• .left {float: αριστερά?}
• .right {float: right}
• footer {σαφής: τόσο}

Το γεγονός ότι τα μπλοκ με τις κατηγορίες αριστερά και δεξιά πτώση από το σύνολο της ροής, δηλαδή, όλα τα άλλα στοιχεία που αγνόησε την ίδια την ύπαρξη των στοιχείων ευθυγραμμισμένα. Property σαφές: και οι δύο επιτρέπει μπλοκ footer ή οποιαδήποτε άλλη ορατή καταβυθίστηκε από τα κύτταρα ροής και απαγορεύει περιτυλίγματος (float) τόσο στην αριστερή και τη δεξιά. Ως εκ τούτου, στο παράδειγμά μας, το υποσέλιδο μετατοπίζεται προς τα κάτω.

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

Υπάρχουν περιπτώσεις όπου δεν είναι αρκετή για να ρυθμίσετε την ευθυγράμμιση του κέντρου των CSS-τρόπους, θα πρέπει επίσης να αλλάξετε την κατακόρυφη θέση του μπλοκ των παιδιών. Οποιαδήποτε γραμμή ή γραμμή-μπλοκ στοιχείου μπορεί να πιεστεί έναντι του άνω ή κάτω άκρο, που βρίσκεται στη μέση της μητρικής στοιχείο ή να είναι σε μια αυθαίρετη θέση. Τις περισσότερες φορές απαιτούν την ευθυγράμμιση του κέντρου του μπλοκ, χρησιμοποιεί το χαρακτηριστικό κάθετη-align. Ας υποθέσουμε ότι υπάρχουν δύο μπλοκ, ένα τοποθετημένο μέσα στο άλλο. Σε αυτή την εσωτερική μονάδα - στοιχείο σειρά-μπλοκ (απεικόνιση: inline-block). Είναι απαραίτητο να ευθυγραμμιστεί η κατακόρυφη παιδί μπλοκ:

• ευθυγράμμιση της άνω όριο - .child {κάθετη-align: top}?
• κεντραρισμένη - .child {κάθετη-align: μεσαία}?
• ευθυγράμμιση του κάτω άκρου - .child {κάθετη-align: πυθμένα}?

Στο στοιχείων μπλοκ ήχου text-align ή κάθετη-align δεν ισχύει.

Πιθανά προβλήματα με ευθυγραμμισμένες μονάδες

Μερικές φορές div align το κέντρο της CSS-τρόπο μπορεί να προκαλέσει ένα μικρό πρόβλημα. Για παράδειγμα, όταν χρησιμοποιείται ένα πλωτήρα: για παράδειγμα, υπάρχουν τρία τετράγωνα: .first, .second και .third. Το δεύτερο και το τρίτο μπλοκ βρίσκονται στο πρώτο. Ένα στοιχείο με μια τάξη δεύτερο αριστερή στοίχιση, και το τελευταίο μπλοκ - σχετικά με το δικαίωμα. Μετά την ευθυγράμμιση των δύο έπεσε από το ρεύμα. Εάν το γονικό στοιχείο δεν καθορίζεται το ύψος (π.χ., 30em), θα πάψει να τεντώσει το ύψος της θυγατρικής μονάδες. Για να αποφύγετε αυτό το σφάλμα, χρησιμοποιήστε το «αποστάτη» - μια ειδική μονάδα, η οποία βλέπει .second και .third. CSS-code:

• .second {float: αριστερά}
• .third {float: right}
• .clearfix {ύψος: 0? σαφής: τα δύο?}

ψευδο χρησιμοποιούνται συχνά: μετά, η οποία επιτρέπει επίσης να επιστρέψει το μπλοκ στη θέση δημιουργώντας psevdorasporki (στο παράδειγμα στην div με την κατηγορία βρίσκεται στο εσωτερικό του δοχείου και περιλαμβάνει ένα .first .left και .right):

• .left {float: αριστερά}
• .right {float: right}
• .container: μετά {περιεχόμενο: ''? απεικόνιση: τραπέζι? σαφής: τα δύο?}

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

Ένα άλλο πρόβλημα που συναντάται συχνά διάταξη - ευθυγράμμιση των στοιχείων γραμμής-μπλοκ. Μετά από κάθε μία από αυτές ένας χώρος προστίθεται αυτόματα. Χειριστείτε βοηθά το ακίνητο περιθώριο, το οποίο ορίζεται από την αρνητική εσοχή. Υπάρχουν και άλλοι τρόποι, που χρησιμοποιούνται λιγότερο συχνά, για παράδειγμα, επαναφέρετε το μέγεθος της γραμματοσειράς. Σε αυτήν την περίπτωση, οι ιδιότητες του γονικό στοιχείο καταγράφει font-size: 0. Αν ευρίσκεται εντός του μπλοκ κειμένου, οι ιδιότητες των στοιχείων γραμμής-μπλοκ έχουν επιστρέψει στο επιθυμητό μέγεθος της γραμματοσειράς. Για παράδειγμα, font-size: 1em. Η μέθοδος δεν είναι πάντα εύκολη, γι 'αυτό είναι πολύ πιο συχνά χρησιμοποιούμενη έκδοση με εξωτερικά περιθώρια.

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