Στοίχιση Block Στοιχείων στο CSS

Η ιδιότητα margin δεν χρησιμοποιείται μόνο για τον καθορισμό των περιθωρίων, αλλά και για τη κεντροθέτηση block στοιχείων. Για να γίνει αυτό, το δεξί και το αριστερό περιθώριο πρέπει να οριστούν στην τιμή auto.

Στο παρακάτω παράδειγμα, το εσωτερικό block θα τοποθετηθεί στο κέντρο:

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	border: 1px solid red;
}

.child {
	height: 100px;
	width: 200px;
	border: 1px solid green;
	margin: 10px auto;
}

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

Αν χρειαζόμαστε διαφορετικό πάνω και κάτω περιθώριο margin, τότε μπορούμε να γράψουμε ως εξής:

.child {
	margin: 30px auto 10px auto;
}

Μπορεί να ξαναγραφεί και με τρεις τιμές: η πρώτη θα ορίσει το πάνω περιθώριο, η τρίτη - το κάτω, και η δεύτερη θα ορίσει την τιμή auto για το δεξί και το αριστερό περιθώριο:

.child {
	margin: 30px auto 10px;
}

Επαναλάβετε τη σελίδα σύμφωνα με το δείγμα, κάνοντας έτσι ώστε τα πράσινα blocks να τοποθετούνται στο κέντρο του γονέα τους: