Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Το Ιερό Δισκοπότηρο της κεντρικής στοίχισης στο CSS

by
Difficulty:BeginnerLength:ShortLanguages:

Greek (ελληνικά) translation by George Melidis (you can also view the original English article)

Ο Chris Coyier πρόσφατα δημοσίευσε στην ιστοσελίδα του, το άρθρο με τίτλο CSS Tricks,decision tree με σκοπό την παρουσίαση πληθώρας τρόπων, οριζόντιας και κάθετης στοίχισης χρησμοποιώντας CSS. Αυτόνομες οι παρακάτω λύσεις έχουν όλες τα ιδιαίτερα χαρακτηριστικά τους, αλλά σε συνδυασμό γίνονται ένα καταπληκτικό εργαλείο κεντραρίσματος που λειτουργεί cross-browser, και σε IE8 και πάνω.

Έτσι γίνετε.

Αρχικά Blocks

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

Για να βεβαιωθούμε ότι το στοιχείο προσαρμόζεται αναλόγως, γράφουμε html, body { width: 100%; height: 100%; }.

Ανατρέπουμε τα δεδομένα

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

Τέλος θα δημουργήσουμε την οριζόντια στοίχιση των στοιχείων:

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

Τροποποιήσεις

Για να αλλάξεις την οριζόντια στοίχιση των στοιχείων, απλά μετάτρεπεις την παράμετρο .inner text-align. Για να αλλάξεις την κάθετη στοίχιση των στοιχείων, απλά μετατρέπεις την παράμετρο .inner vertical-align

Συμπέρασμα

Μπορεί να δημιουργείται η εντύπωση ότι υπάρχει πολύ κώδικας, αλλα στην πραγματικότητα είναι μόνο τρία div: .outer, .inner, και.centered. Ο κώδικας είναι τόσο συνεπείς, ώστε μπορεί να χρησιμοποιηθεί και σε άλλες ιστοσελίδες, χωρίς να ανησυχίσεις ξανά.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.