Πώς να κεντράρετε μια εικόνα κάθετα και οριζόντια με CSS
Πολλοί προγραμματιστές αγωνίζονται ενώ εργάζονται με εικόνες. Ο χειρισμός της απόκρισης και της ευθυγράμμισης είναι ιδιαίτερα σκληρός, ειδικά στο κέντρο μιας εικόνας στο μέσο της σελίδας.
Έτσι σε αυτήν την ανάρτηση, θα δείξω μερικούς από τους πιο συνηθισμένους τρόπους για να κεντράρετε μια εικόνα τόσο κάθετα όσο και οριζόντια χρησιμοποιώντας διαφορετικές ιδιότητες CSS.
Έχω αναλύσει τις ιδιότητες θέσης και εμφάνισης CSS στην προηγούμενη ανάρτησή μου. Εάν δεν είστε εξοικειωμένοι με αυτές τις ιδιότητες, σας συνιστούμε να δείτε αυτές τις δημοσιεύσεις πριν διαβάσετε αυτό το άρθρο.
Ακολουθεί μια έκδοση βίντεο, αν θέλετε να τη δείτε:
Κεντράρισμα μιας εικόνας οριζόντια
Ας ξεκινήσουμε με κεντράρισμα μιας εικόνας οριζόντια χρησιμοποιώντας 3 διαφορετικές ιδιότητες CSS.
Στοίχιση κειμένου
Ο πρώτος τρόπος κεντραρίσματος μιας εικόνας οριζόντια είναι η χρήση της text-alignιδιότητας. Ωστόσο, αυτή η μέθοδος λειτουργεί μόνο εάν η εικόνα βρίσκεται μέσα σε ένα κοντέινερ επιπέδου μπλοκ, όπως :
div { text-align: center; } Περιθώριο: Αυτόματο
Ένας άλλος τρόπος για να κεντράρετε μια εικόνα είναι χρησιμοποιώντας την margin: autoιδιότητα (για αριστερό-περιθώριο και δεξί-περιθώριο).
Ωστόσο, η χρήση margin: autoμόνο δεν θα λειτουργήσει για εικόνες. Εάν πρέπει να χρησιμοποιήσετε margin: auto, υπάρχουν και 2 επιπλέον ιδιότητες που πρέπει να χρησιμοποιήσετε.
Η ιδιότητα margin-auto δεν έχει καμία επίδραση σε στοιχεία inline-level. Δεδομένου ότι η
img { margin: auto; display: block; }Δεύτερον, πρέπει επίσης να ορίσουμε ένα πλάτος. Έτσι, το αριστερό και το δεξί περιθώριο μπορούν να πάρουν τον υπόλοιπο κενό χώρο και να ευθυγραμμιστούν αυτόματα, κάτι που κάνει το τέχνασμα (εκτός αν το δώσουμε πλάτος 100%):
img { width: 60%; margin: auto; display: block; }Οθόνη: Flex
Ο τρίτος τρόπος να κεντράρετε μια εικόνα οριζόντια είναι με τη χρήση display: flex. Ακριβώς όπως χρησιμοποιήσαμε την text-alignιδιότητα για κοντέινερ, χρησιμοποιούμε και display: flexγια κοντέινερ.
Ωστόσο, η χρήση display: flexμόνοι σας δεν θα είναι αρκετή. Το κοντέινερ πρέπει επίσης να έχει μια επιπλέον ιδιότητα που ονομάζεται justify-content:
div { display: flex; justify-content: center; } img { width: 60%; }Η justify-contentιδιότητα λειτουργεί μαζί με την display: flexοποία μπορούμε να χρησιμοποιήσουμε για να κεντράρουμε την εικόνα οριζόντια.
Τέλος, το πλάτος της εικόνας πρέπει να είναι μικρότερο από το πλάτος του δοχείου, διαφορετικά, χρειάζεται το 100% του χώρου και στη συνέχεια δεν μπορούμε να το κεντράρουμε.
Σημαντικό: Η display: flexιδιότητα δεν υποστηρίζεται σε παλαιότερες εκδόσεις προγραμμάτων περιήγησης. Δείτε εδώ για περισσότερες λεπτομέρειες.
Κεντράρισμα μιας εικόνας κάθετα
Οθόνη: Flex
Για κάθετη ευθυγράμμιση, η χρήση display: flexείναι πάλι πολύ χρήσιμη.
Εξετάστε μια περίπτωση όπου το κοντέινερ μας έχει ύψος 800 εικονοστοιχεία, αλλά το ύψος της εικόνας είναι μόνο 500 εικονοστοιχεία:
div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }Τώρα, σε αυτήν την περίπτωση, η προσθήκη μιας γραμμής κώδικα στο κοντέινερ align-items: center, κάνει το κόλπο:
div { display: flex; justify-content: center; align-items: center; height: 800px; }Η align-itemsιδιότητα μπορεί να τοποθετήσει στοιχεία κάθετα εάν χρησιμοποιούνται μαζί display: flex.
Θέση: Απόλυτες ιδιότητες και μετασχηματισμός
Μια άλλη μέθοδος για κατακόρυφη ευθυγράμμιση είναι η χρήση των ιδιοτήτων positionκαι των transformιδιοτήτων μαζί. Αυτό είναι λίγο περίπλοκο, οπότε ας το κάνουμε βήμα προς βήμα.
Βήμα 1: Ορίστε την απόλυτη θέση
Πρώτον, αλλάζουμε τη συμπεριφορά τοποθέτησης της εικόνας staticσε absolute:
div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }Επίσης, πρέπει να βρίσκεται μέσα σε ένα σχετικά τοποθετημένο δοχείο, οπότε προσθέτουμε position: relativeστο δοχείο div.
Βήμα 2: Ορίστε τις κορυφαίες και τις αριστερές ιδιότητες
Δεύτερον, ορίζουμε τις ιδιότητες πάνω και αριστερά για την εικόνα και τις ορίζουμε στο 50%. Αυτό θα μετακινήσει το σημείο εκκίνησης (πάνω αριστερά) της εικόνας στο κέντρο του κοντέινερ:
img { width: 80%; position: absolute; top: 50%; left: 50%; }Βήμα 3: Ορίστε την ιδιότητα Transform
Αλλά το δεύτερο βήμα έχει μετακινήσει την εικόνα εν μέρει έξω από το δοχείο της. Πρέπει λοιπόν να το επαναφέρουμε μέσα.
Ο καθορισμός μιας transformιδιότητας και η προσθήκη -50% στον άξονα X και Y κάνει το τέχνασμα:
img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Υπάρχουν και άλλοι τρόποι να κεντράρετε τα πράγματα οριζόντια και κάθετα, αλλά εξήγησα τα πιο συνηθισμένα. Ελπίζω αυτή η ανάρτηση να σας βοηθήσει να καταλάβετε πώς να ευθυγραμμίσετε τις εικόνες σας στο κέντρο της σελίδας.
Αν θέλετε να μάθετε περισσότερα για την ανάπτυξη ιστού, μη διστάσετε να επισκεφτείτε το κανάλι μου στο Youtube για περισσότερα.
Ευχαριστούμε που το διαβάσατε!
