Τρόπος χρήσης του CSS για κεντράρισμα εικόνων και άλλων αντικειμένων HTML

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

Κεντράρισμα κειμένου με CSS

Πρέπει να γνωρίζετε μόνο μια ιδιότητα στυλ για να κεντράρετε το κείμενο σε μια σελίδα:

. κέντρο {
text-align: center;
}

Με αυτήν τη γραμμή CSS, κάθε παράγραφος που γράφεται με την κλάση .center θα κεντράρεται οριζόντια μέσα στο μητρικό της στοιχείο. Για παράδειγμα, μια παράγραφος μέσα σε μια διαίρεση (ένα παιδί αυτής της διαίρεσης) θα κεντράριζε οριζόντια μέσα στο.

Ακολουθεί ένα παράδειγμα αυτής της τάξης που εφαρμόζεται στο έγγραφο HTML:

Αυτό το κείμενο είναι κεντραρισμένο.

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

Κεντράρισμα μπλοκ περιεχομένου με CSS

Τα μπλοκ περιεχομένου δημιουργούνται χρησιμοποιώντας το HTML.

. κέντρο {
περιθώριο: αυτόματο;
πλάτος: 80em;
}

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

Εδώ εφαρμόζεται στο HTML:

Όλο αυτό το μπλοκ είναι κεντραρισμένο,
αλλά το κείμενο μέσα του είναι αριστερή στοίχιση.

Εφόσον το μπλοκ σας έχει καθορισμένο πλάτος, θα κεντραριστεί μέσα στο στοιχείο που περιέχει. Κείμενο που περιέχεται σε αυτό το μπλοκ δεν θα είναι κεντραρισμένο μέσα σε αυτό, αλλά θα είναι δικαιολογημένο από το αριστερό. Αυτό συμβαίνει επειδή το κείμενο είναι δικαιολογημένο ως αριστερό ως προεπιλογή στα προγράμματα περιήγησης ιστού. Εάν θέλετε το κείμενο να είναι κεντραρισμένο, θα μπορούσατε να χρησιμοποιήσετε την ιδιότητα ευθυγράμμισης κειμένου που καλύπτεται νωρίτερα σε συνδυασμό με αυτήν τη μέθοδο για να κεντράρετε το τμήμα.

Κεντράρισμα εικόνων με CSS

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

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

img.center {
οθόνη: μπλοκ;
margin-left: auto;
margin-right: auto;
}

Και εδώ είναι το HTML για την εικόνα που θα κεντραριστεί:

Μπορείτε επίσης να κεντράρετε αντικείμενα χρησιμοποιώντας ενσωματωμένο CSS (δείτε παρακάτω), αλλά αυτή η προσέγγιση δεν συνιστάται επειδή προσθέτει οπτικά στυλ στη σήμανση HTML. Θυμηθείτε, το στυλ και η δομή πρέπει να είναι ξεχωριστά. Η προσθήκη στυλ CSS σε HTML θα σπάσει αυτόν τον διαχωρισμό και, ως εκ τούτου, θα πρέπει να το αποφύγετε όποτε είναι δυνατόν.

Στοιχεία κεντραρίσματος κάθετα με CSS

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

Η κάθετη ευθυγράμμιση λειτουργεί παρόμοια με την οριζόντια ευθυγράμμιση που καλύπτεται παραπάνω. Η ιδιότητα CSS έχει κατακόρυφη ευθυγράμμιση, όπως:

.vcenter {
κάθετη-ευθυγράμμιση: μεσαία;
} 

Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίξτε αυτό το στυλ CSS. Εάν έχετε προβλήματα με παλαιότερα προγράμματα περιήγησης, το W3C συνιστά να κεντράρετε το κείμενο κάθετα σε ένα κοντέινερ. Για να το κάνετε αυτό, τοποθετήστε τα στοιχεία μέσα σε ένα στοιχείο που περιέχει, όπως a divκαι ορίστε ένα ελάχιστο ύψος σε αυτό. Δηλώστε το περιέχον στοιχείο ως κελί πίνακα και ορίστε την κατακόρυφη στοίχιση στο "μεσαίο".

Για παράδειγμα, εδώ είναι το CSS:

.vcenter {
ελάχιστο ύψος: 12em;
οθόνη: table-cell;
κάθετη-ευθυγράμμιση: μεσαία;
}

Και εδώ είναι το HTML:

Αυτό το κείμενο είναι κάθετα στο κέντρο στο πλαίσιο.

Κάθετη επικέντρωση και παλαιότερες εκδόσεις του Internet Explorer

Μπορείτε να αναγκάσετε τον Internet Explorer (IE) να κεντράρει και, στη συνέχεια, να χρησιμοποιεί σχόλια υπό όρους, έτσι ώστε μόνο ο IE να βλέπει τα στυλ, αλλά είναι λίγο λεκτική και ελκυστική. Η απόφαση της Microsoft για το 2015 να εγκαταλείψει την υποστήριξη για παλαιότερες εκδόσεις του IE, ωστόσο, θα το κάνει αυτό μη-ζήτημα καθώς ο IE παύει να χρησιμοποιείται.