Στην CSS, μπορούμε να χρησιμοποιήσουμε τις ιδιότητες text-align και vertical-align για τον οριζόντιο και κατακόρυφο στοίχισμα στοιχείων.
Για οριζόντιο στοίχισμα, χρησιμοποιούμε την ιδιότητα text-align. Παραδείγματα:
.container {
text-align: center; /* Κεντράρισμα του περιεχομένου */
}
.item {
text-align: right; /* Δεξιό στοίχισμα του στοιχείου */
}
Για κατακόρυφο στοίχισμα, χρησιμοποιούμε την ιδιότητα vertical-align. Αυτή η ιδιότητα έχει διαφορετική συμπεριφορά, ανάλογα με τον τύπο των στοιχείων που τη χρησιμοποιούμε. Για στοιχεία εντός ενός γραμμικού κειμένου, η vertical-align δεν επηρεάζει τον κατακόρυφο στοίχισμα. Ωστόσο, μπορούμε να τη χρησιμοποιήσουμε για στοιχεία τύπου table-cell ή inline-block για την ευθυγράμμιση σε μια γραμμή. Παραδείγματα:
.container {
display: table-cell;
vertical-align: middle; /* Κεντράρισμα κατακόρυφα του στοιχείου */
}
.item {
display: inline-block;
vertical-align: top; /* Πάνω στοίχισμα του στοιχείου */
}
Αυτές οι ιδιότητες μπορούν να χρησιμοποιηθούν σε συνδυασμό με άλλες ιδιότητες CSS για να επιτευχθεί το επιθυμητό στοίχισμα των στοιχείων στη σελίδα.
Για να κεντράρετε οριζόντια ένα block στοιχείο (όπως ένα <div>), χρησιμοποιήστε τον κανόνα margin: auto;.
Ορίζοντας το πλάτος του στοιχείου, θα το εμποδίσετε να επεκταθεί μέχρι τις άκρες του περιέκτη του.
Το στοιχείο θα πάρει το καθορισμένο πλάτος και το υπόλοιπο κενό χώρο θα διαιρεθεί ισόποσα μεταξύ των δύο περιθωρίων:
.centered {
width: 300px;
margin: auto;
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered θα έχει πλάτος 300 pixels και θα εμφανιστεί κεντραρισμένο οριζόντια στη σελίδα.
Αν θέλετε να κεντράρετε και κατακόρυφα το block στοιχείο, μπορείτε να χρησιμοποιήσετε την ιδιότητα text-align: center; στον περιέκτη του:
.container {
text-align: center;
}
.centered {
width: 300px;
margin: auto;
}
Με αυτόν τον τρόπο, το στοιχείο .centered θα είναι τόσο οριζόντια όσο και κατακόρυφα κεντραρισμένο μέσα στον περιέκτη .container.
Για να κεντράρετε μόνο το κείμενο μέσα σε ένα στοιχείο, χρησιμοποιήστε τον κανόνα text-align: center;.
.centered-text {
text-align: center;
}
Στο παραπάνω παράδειγμα, το κείμενο εντός των στοιχείων με την κλάση .centered-text θα εμφανίζεται κεντραρισμένο οριζόντια στο εσωτερικό τους.
[adinserter block=”2″]
Για να κεντράρετε μια εικόνα, ορίστε το αριστερό και δεξί περιθώριο (margin) σε auto και μετατρέψτε την σε ένα block στοιχείο:
.centered-image {
display: block;
margin-left: auto;
margin-right: auto;
}
Στο παραπάνω παράδειγμα, η εικόνα με την κλάση .centered-image θα είναι κεντραρισμένη οριζόντια μέσα στον περιέκτη της, καθώς το αριστερό και δεξί περιθώριο θα αυτορυθμίζονται αυτόματα για να επιτευχθεί το κεντράρισμα.
Ένας τρόπος για το στοίχισμα στοιχείων είναι να χρησιμοποιήσετε την ιδιότητα position: absolute;. Αυτή η ιδιότητα σας επιτρέπει να τοποθετήσετε ένα στοιχείο σε συγκεκριμένη θέση εντός του γονικού στοιχείου.
Για να αλιεύσετε ένα στοιχείο στα αριστερά, μπορείτε να χρησιμοποιήσετε τις ιδιότητες left: 0; και right: auto;. Αντίστοιχα, για να αλιεύσετε ένα στοιχείο στα δεξιά, μπορείτε να χρησιμοποιήσετε τις ιδιότητες left: auto; και right: 0;.
Παράδειγμα:
.left-aligned {
position: absolute;
left: 0;
right: auto;
}
.right-aligned {
position: absolute;
left: auto;
right: 0;
}
Στο παραπάνω παράδειγμα, τα στοιχεία με τις κλάσεις .left-aligned και .right-aligned θα αλιεύονται στα αριστερά και δεξιά αντίστοιχα, εντός του γονικού στοιχείου.
Ένας άλλος τρόπος για το στοίχισμα στοιχείων είναι να χρησιμοποιήσετε την ιδιότητα float. Η ιδιότητα αυτή επιτρέπει να τοποθετήσετε ένα στοιχείο στα αριστερά ή στα δεξιά του γονικού στοιχείου.
Για να αλιεύσετε ένα στοιχείο στα αριστερά, μπορείτε να χρησιμοποιήσετε την ιδιότητα float: left;. Αντίστοιχα, για να αλιεύσετε ένα στοιχείο στα δεξιά, μπορείτε να χρησιμοποιήσετε την ιδιότητα float: right;.
Παράδειγμα:
.left-aligned {
float: left;
}
.right-aligned {
float: right;
}
Στο παραπάνω παράδειγμα, τα στοιχεία με τις κλάσεις .left-aligned και .right-aligned θα αλιεύονται στα αριστερά και δεξιά αντίστοιχα, εντός του γονικού στοιχείου. Τα υπόλοιπα στοιχεία θα τοποθετηθούν δίπλα τους, στην αντίστοιχη πλευρά.
Το clearfix hack είναι μια τεχνική που χρησιμοποιείται για να διορθώσει το πρόβλημα όταν ένα στοιχείο με εφαπτόμενα (floated) παιδιά δεν “καθαρίζει” σωστά και ορατοποιείται κάτω από αυτά. Το clearfix hack επιλύει αυτό το πρόβλημα εισάγοντας ένα στοιχείο καθαρισμού (clearfix element) με κατάλληλους κανόνες CSS.
Ένα απλό παράδειγμα clearfix hack είναι το εξής:
.clearfix::after {
content: "";
display: table;
clear: both;
}
Στο παραπάνω παράδειγμα, δημιουργείται ένα ψευδο-στοιχείο (::after) με κενό περιεχόμενο (content: "") και χρησιμοποιείται η ιδιότητα display: table; για να δημιουργηθεί ένα καινούργιο φορματοποιημένο block formatting context. Ο κανόνας clear: both; εξασφαλίζει ότι το clearfix element “καθαρίζει” και εμφανίζεται κάτω από τα εφαπτόμενα παιδιά.
[adinserter block=”3″]
Για να χρησιμοποιήσετε το clearfix hack, πρέπει να προσθέσετε την κλάση .clearfix στο γονικό στοιχείο που περιέχει τα εφαπτόμενα παιδιά:
<div class="clearfix"> <!-- Εφαπτόμενα παιδιά εδώ --> </div>
Με το clearfix hack, μπορείτε να διασφαλίσετε ότι το γονικό στοιχείο θα περικλείει σωστά τα έφαπτόμενα παιδιά και θα εμφανίζεται σωστά στη σελίδα.
Για να κεντράρετε κατακόρυφα ένα στοιχείο στο CSS, μια απλή λύση είναι να χρησιμοποιήσετε παραπάνω και κάτω padding. Αυτό μπορεί να επιτευχθεί δίνοντας ίσο πάνω και κάτω padding στο στοιχείο.
Παράδειγμα:
.centered {
padding-top: 50px;
padding-bottom: 50px;
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered θα έχει 50 pixels πάνω και 50 pixels κάτω padding, που θα το κεντράρει κατακόρυφα.
Μπορείτε να προσαρμόσετε την τιμή του padding ανάλογα με τις απαιτήσεις σας για το πλάτος του κεντραρισμένου στοιχείου.
Για να κεντράρετε τόσο οριζόντια όσο και κατακόρυφα ένα στοιχείο, μπορείτε να χρησιμοποιήσετε τόσο padding όσο και την ιδιότητα text-align: center.
Παράδειγμα:
.centered {
padding: 50px;
text-align: center;
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered θα έχει 50 pixels padding σε όλες τις πλευρές, που θα το κεντράρει τόσο οριζόντια όσο και κατακόρυφα. Επιπλέον, η ιδιότητα text-align: center θα ευθυγραμμίσει το κείμενο μέσα στο στοιχείο στο κέντρο.
Μπορείτε να προσαρμόσετε την τιμή του padding ανάλογα με τις απαιτήσεις σας για το μέγεθος του κεντραρισμένου στοιχείου.
Ένα άλλο κόλπο που μπορείτε να χρησιμοποιήσετε για να κεντράρετε κατακόρυφα ένα στοιχείο είναι να χρησιμοποιήσετε την ιδιότητα line-height με μια τιμή ίση με την ιδιότητα height του στοιχείου.
Παράδειγμα:
.centered {
height: 200px;
line-height: 200px;
text-align: center;
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered έχει ύψος 200 pixels και η ιδιότητα line-height ορίζεται σε 200 pixels. Αυτό καθιστά το κείμενο μέσα στο στοιχείο να ευθυγραμμίζεται κατακόρυφα στο κέντρο του στοιχείου.
[adinserter block=”4″]
Μην ξεχάσετε επίσης να χρησιμοποιήσετε την ιδιότητα text-align: center για να κεντράρετε οριζόντια το κείμενο μέσα στο στοιχείο.
Εάν οι λύσεις με padding και line-height δεν είναι εφικτές, μια άλλη λύση είναι να χρησιμοποιήσετε την θέση (positioning) και την ιδιότητα transform.
Παράδειγμα:
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered έχει οριστεί με θέση relative, ενώ οι ιδιότητες top και transform χρησιμοποιούνται για να κεντράρουν το στοιχείο κατακόρυφα.
Η τιμή του top ορίζει το ποσοστό του ύψους του στοιχείου από την κορυφή του γονικού στοιχείου. Στο παράδειγμα, το στοιχείο μετακινείται κατά το 50% του ύψους του προς τα κάτω.
Η ιδιότητα transform με την τιμή translateY(-50%) μετακινεί το στοιχείο κατά το 50% του εαυτού του προς τα πάνω. Αυτό επανορθώνει τη μετακίνηση που έγινε με την ιδιότητα top και καταφέρνει να κεντράρει το στοιχείο κατακόρυφα.
Αυτή η λύση είναι χρήσιμη όταν δεν είναι δυνατό να χρησιμοποιήσετε τις προηγούμενες μεθόδους ή όταν θέλετε να κεντράρετε δυναμικά μεταβαλλόμενο περιεχόμενο κατακόρυφα.
Εάν οι λύσεις με padding και line-height δεν είναι εφικτές, μια άλλη λύση είναι να χρησιμοποιήσετε την θέση (positioning) και την ιδιότητα transform.
Παράδειγμα:
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Στο παραπάνω παράδειγμα, το στοιχείο με την κλάση .centered έχει οριστεί με θέση relative, ενώ οι ιδιότητες top και transform χρησιμοποιούνται για να κεντράρουν το στοιχείο κατακόρυφα.
Η τιμή του top ορίζει το ποσοστό του ύψους του στοιχείου από την κορυφή του γονικού στοιχείου. Στο παράδειγμα, το στοιχείο μετακινείται κατά το 50% του ύψους του προς τα κάτω.
Η ιδιότητα transform με την τιμή translateY(-50%) μετακινεί το στοιχείο κατά το 50% του εαυτού του προς τα πάνω. Αυτό επανορθώνει τη μετακίνηση που έγινε με την ιδιότητα top και καταφέρνει να κεντράρει το στοιχείο κατακόρυφα.
Αυτή η λύση είναι χρήσιμη όταν δεν είναι δυνατό να χρησιμοποιήσετε τις προηγούμενες μεθόδους ή όταν θέλετε να κεντράρετε δυναμικά μεταβαλλόμενο περιεχόμενο κατακόρυφα.