- Πώς να κεντράρετε μια εικόνα στο Div οριζόντια;
- Ιδιότητα περιθωρίου
- Μονάδα Flexbox
- Διάταξη προβολής πλέγματος
- Ιδιότητα θέσης
Πώς να κεντράρετε μια εικόνα στο Div οριζόντια;
Ο προγραμματιστής μπορεί να χρησιμοποιήσει την ιδιότητα περιθωρίου, τη λειτουργική μονάδα Flexbox, τη διάταξη προβολής πλέγματος και το χαρακτηριστικό Θέση για να κεντράρει μια εικόνα στο div οριζόντια. Ακολουθήστε τον παρακάτω οδηγό για να ευθυγραμμίσετε την εικόνα οριζόντια στο κέντρο στην ετικέτα div.
Ας υποθέσουμε ότι υπάρχει ένα div στο οποίο η εικόνα τοποθετείται με αυτόν τον τρόπο στο αρχείο HTML:
< div τάξη = 'ρίζα' >
< img src = '../book.jpg' ύψος = 'πενήντα%' πλάτος = 'πενήντα%' τάξη = 'εικόνα' >
< / div >
Η εικόνα αποκτά πλάτος και ύψος 50% και μια κατηγορία 'εικόνας'.
Χρήση της ιδιότητας περιθωρίου
Οι χρήστες μπορούν να προσθέσουν χώρο γύρω από τα στοιχεία HTML χρησιμοποιώντας την ιδιότητα περιθωρίου. Εκχωρεί ένα περιθώριο ανάλογα με τον διαθέσιμο χώρο μετά την αλλαγή του μεγέθους της οθόνης του παραθύρου. Για παράδειγμα, ορίζει το περιθώριο αριστερά και δεξιά σε αυτόματο και η ιδιότητα εμφάνισης έχει οριστεί να αποκλείει:
img {
οθόνη: μπλοκ;
περιθώριο-αριστερά: αυτόματο;
margin-right: auto;
}
Μετά την εκτέλεση του παραπάνω παραδείγματος, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος δείχνει ότι η εικόνα βρίσκεται τώρα στο κέντρο.
Χρήση της μονάδας Flexbox
Ο ' flexbox ” είναι μια ενότητα που περιέχει ένα πλήρες σύνολο ιδιοτήτων. Στην περίπτωσή μας, επιλέξτε την κλάση του στοιχείου ρίζας και χρησιμοποιήστε το flex ως τιμή της ιδιότητας εμφάνισης. Ορίστε το κέντρο ως τιμή για το ' δικαιολογώ-περιεχόμενο ' και ' στοίχιση-στοιχεία ' ιδιότητες:
.ρίζα {οθόνη: flex;
δικαιολογώ- περιεχόμενο : κέντρο;
στοίχιση-στοιχεία: κέντρο;
Ιστορικό- χρώμα : μπλε;
}
Η ιστοσελίδα μοιάζει με αυτό, μετά την εκτέλεση του κώδικα:
Η παραπάνω έξοδος δείχνει ότι η εικόνα εμφανίζεται στο κέντρο του div με χρώμα φόντου ρυθμισμένο σε 'μπλε'.
Χρήση της μονάδας διάταξης προβολής πλέγματος
Η διάταξη προβολής πλέγματος έχει 12 στήλες και το συνολικό πλάτος ορίζεται στο 100% και τοποθετεί κάθε στοιχείο σε μια συγκεκριμένη θέση στην ιστοσελίδα:
.ρίζα {οθόνη: πλέγμα;
θέσεις-αντικείμενα: κέντρο;
}
Στο παραπάνω απόσπασμα κώδικα, η τιμή 'πλέγμα' εκχωρείται στην ιδιότητα εμφάνισης. Ενώ το 'place-item' χρησιμοποιείται ως συντομογραφία για τις ιδιότητες 'justify-content' και 'align-item':
Η έξοδος επαληθεύει ότι η εικόνα βρίσκεται στο κέντρο του div χρησιμοποιώντας τη μέθοδο πλέγματος:
Χρήση του χαρακτηριστικού θέσης
Ορίζοντας τη θέση της κλάσης ρίζας σε σχετική τιμή και της κλάσης εικόνας σε απόλυτη τιμή. Η εικόνα μπορεί να εμφανιστεί στο κέντρο του div:
.ρίζα {θέση: σχετική;
}
.εικόνα {
πλάτος : 700 px;
ύψος : 500 px;
θέση: απόλυτη;
αριστερά: πενήντα %;
μετασχηματισμός: translateX ( - πενήντα % ) ;
}
Η εικόνα μετακινείται στα αριστερά του '50%' και στη συνέχεια μετατρέπεται ξανά σε '-50%' στον άξονα Χ. Εμφανίζει την εικόνα στο κέντρο του div οριζόντια:
Έτσι η εικόνα μπορεί να κεντραριστεί στο div οριζόντια.
συμπέρασμα
Για να ορίσετε οριζόντια την εικόνα σε ένα στοιχείο div, χρησιμοποιήστε το ' περιθώριο », « ευέλικτη μονάδα », « διάταξη πλέγματος ' και ' θέση ' ιδιότητες. Ο ' περιθώριο Η ιδιότητα αριστερά και δεξιά έχει οριστεί σε αυτόματη. Η 'flex module' και η 'grid Layout' ρυθμίζουν την οθόνη σε flex και grid αντίστοιχα και χρησιμοποιούν το ' τοποθετήστε το στοιχείο « ιδιότητα να κεντράρει την εικόνα. Η ιδιότητα θέση ορίζει την τιμή σε σχέση με την κλάση ρίζας και την απόλυτη στην κλάση εικόνας και χρησιμοποιεί ιδιότητες 'αριστερά' και 'μετατροπή'. Αυτό το ιστολόγιο έχει δείξει με επιτυχία πώς να κεντράρετε εικόνες σε ένα div οριζόντια.