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 στοιχείο:
1 |
<div class="container"> |
2 |
... |
3 |
</div>
|
1 |
.container { |
2 |
width: 70%; |
3 |
height: 70%; |
4 |
margin: 40px auto; |
5 |
background: red; |
6 |
}
|
Για να βεβαιωθούμε ότι το στοιχείο προσαρμόζεται αναλόγως, γράφουμε html, body { width: 100%; height: 100%; }.
Ανατρέπουμε τα δεδομένα
Σε συνέχεια μέσα στο .container, θα κάνουμε κάθετο κεντράρισμα με χρήση πινάκων. Αυτό κάνει το κλασικό block στοιχείο να συμπεριφέρεται ως κελί πίνακα, και έτσι έχουμε την κάθετη στοίχιση.
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
... |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
1 |
.outer { |
2 |
display: table; |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
}
|
6 |
.inner { |
7 |
display: table-cell; |
8 |
vertical-align: middle; |
9 |
text-align: center; |
10 |
}
|
Τέλος θα δημουργήσουμε την οριζόντια στοίχιση των στοιχείων:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
<div class="centered"> |
5 |
... |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
1 |
.centered { |
2 |
position: relative; |
3 |
display: inline-block; |
4 |
|
5 |
width: 50%; |
6 |
padding: 1em; |
7 |
background: orange; |
8 |
color: white; |
9 |
}
|
Μέσα σε αυτό, μπορείς να προσθέσεις οτιδήποτε επιθυμείς, συμπεριλαμβανομένου δυναμικά μπλόκ κειμένου, ή στοιχεία απόλυτης θέσης.
Τροποποιήσεις
Για να αλλάξεις την οριζόντια στοίχιση των στοιχείων, απλά μετάτρεπεις την παράμετρο .inner text-align. Για να αλλάξεις την κάθετη στοίχιση των στοιχείων, απλά μετατρέπεις την παράμετρο .inner vertical-align
Συμπέρασμα
Μπορεί να δημιουργείται η εντύπωση ότι υπάρχει πολύ κώδικας, αλλα στην πραγματικότητα είναι μόνο τρία div: .outer, .inner, και.centered. Ο κώδικας είναι τόσο συνεπείς, ώστε μπορεί να χρησιμοποιηθεί και σε άλλες ιστοσελίδες, χωρίς να ανησυχίσεις ξανά.
Αυτή η τεχνική κεντραρίσματος είναι σαν αλεξίσφαιρο. Εύχομαι αυτή η μέθοδος να γίνει η στάνταρ μέθοδος κεντρικής στοίχισης στο CSS ώστε να μη σκοτίζουμε το κεφάλι μας άλλο με αυτό το θέμα.
