[CSS/DIV] Επιλύει τέλεια το οριζόντιο κεντράρισμα της σελίδας CSS

Μια κοινή μέθοδος CSS κεντραρίσματος στοιχείων οριζόντια

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

1. Κεντράρισμα με αυτόματα περιθώρια

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

div#container{ margin-left:auto; περιθώριο-δεξιά:αυτόματο; πλάτος: 168 εικονοστοιχεία; }

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

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

2. Χρησιμοποιήστε στοίχιση κειμένου για να επιτύχετε κεντράρισμα

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

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

σώμα{ text-align:κέντρο; }

Θα υπάρξουν προβλήματα μετά από αυτό; Όλοι οι απόγονοι του σώματος είναι κεντραρισμένοι.

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

p{ text-align:αριστερά; }

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

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

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

σώμα{ text-align:κέντρο; } #container{ margin-left:auto; περιθώριο-δεξιά:αυτόματο; περίγραμμα: 1pxsolidred; πλάτος: 168 εικονοστοιχεία; text-align:αριστερά }

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

4. Αρνητικό διάλυμα εξωτερικού περιθωρίου

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

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

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

#container{ φόντο:#ffcurl(mid.jpg)repeat-ycenter; θέση:απόλυτη· αριστερά:50%; πλάτος: 760 εικονοστοιχεία; περιθώριο-αριστερά:-380px; }

Κοιτάξτε, χωρίς αμυχές! Αν και αυτή δεν είναι η προτιμώμενη λύση, είναι ένας καλός τρόπος για να το κάνετε και είναι πολύ ευέλικτη – παραδόξως δεν λειτουργεί καν στο NetscapeNavigator 4.x χωρίς κανένα πρόβλημα, έτσι δεν είναι; Επομένως, εάν θέλετε το ευρύτερο φάσμα υποστήριξης προγράμματος περιήγησης, τότε αυτή η μέθοδος θα είναι η καλύτερη επιλογή.