Saltar al contenido

Κεντράρετε ένα έγγραφο με διάταξη σταθερού πλάτους χρησιμοποιώντας CSS

22 de mayo de 2021

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

Εδώ είναι πώς

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

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

Αναφέρετε αυτό το άρθρο

Μορφή mla apa chicago Η αναφορά σας

Kyrnin, Jennifer. «Κεντράρετε ένα έγγραφο με διάταξη σταθερού πλάτους χρησιμοποιώντας CSS.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/center-document-with-fixed-width-layout-3466906.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Κεντράρετε ένα έγγραφο με διάταξη σταθερού πλάτους χρησιμοποιώντας CSS. Ανακτήθηκε από το https://www.thoughtco.com/center-document-with-fixed-width-layout-3466906
Kyrnin, Jennifer. «Κεντράρετε ένα έγγραφο με διάταξη σταθερού πλάτους χρησιμοποιώντας CSS.» ThoughtCo. https://www.thoughtco.com/center-document-with-fixed-width-layout-3466906 (πρόσβαση στις 22 Μαΐου 2021).

αντιγραφή παραπομπής