Χρησιμοποιήστε το CSS για να κεντράρετε ένα έγγραφο με διάταγμα σταθερού πλάτους

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

Εδώ είναι πώς

  1. Δημιουργήστε μια νέα ιστοσελίδα με ένα φύλλο στυλ CSS στον επεξεργαστή HTML.
  2. Δημιουργήστε ένα στοιχείο div ως κύριο στοιχείο στη σελίδα όπου θα αποθηκεύσετε τα πάντα στη σελίδα.
  3. Δώστε στο στοιχείο div ένα αναγνωριστικό που είναι μοναδικό στη σελίδα.
  4. Ανοίξτε το φύλλο στυλ CSS και ορίστε το πλάτος του στοιχείου div. div # κύρια {πλάτος: 750px; }}
  5. Προσθέστε αυτόματα περιθώρια για να κεντράρετε το div σας. div # κύρια {πλάτος: 750px; margin-left: auto; margin-right: auto}
  6. Για να το διορθώσετε για Netscape 4 και IE 4 - 6 ( λειτουργία quirks ) προσθέστε μια ευθυγράμμιση κειμένου στο σώμα. σώμα {text-align: center; }}
  7. Αλλά τότε όλο το κείμενο μέσα στο κέντρο είναι κεντραρισμένο, οπότε επαναπροσδιορίστε το κείμενο στο #main div σας προσθέτοντας κείμενο-ευθυγράμμιση: αριστερά. εκεί μέσα. div # κύρια {πλάτος: 750px; margin-left: auto; margin-right: auto; κείμενο-ευθυγράμμιση: αριστερά; }}
  8. Αποθηκεύστε τη σελίδα σας και το φύλλο στυλ σας.
  9. Δοκιμάστε σε διάφορα προγράμματα περιήγησης στο Web.

Υπόδειξη

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