θα θέλατε να μάθετε πώς κεντράρετε μια εικόνα σε ένα DIV? Το κεντράρισμα μιας εικόνας σε ένα DIV μπορεί να είναι χρήσιμο για τη βελτίωση της εμφάνισης και της οργάνωσης της ιστοσελίδας σας και για την επισήμανση της εικόνας που θέλετε να εμφανίσετε. Κεντράρετε μια εικόνα σε ένα DIV δεν είναι δύσκολο, αλλά εξαρτάται από διάφορους παράγοντες, όπως ο τύπος εικόνας, το μέγεθος του DIV, το στυλ του DIV κ.λπ.
Σε αυτό το άρθρο θα εξηγήσουμε πώς να κεντράρετε μια εικόνα σε ένα DIV χρησιμοποιώντας HTML και CSS, οι οποίες είναι οι γλώσσες προγραμματισμού που χρησιμοποιούνται για τη δημιουργία και το σχεδιασμό ιστοσελίδων. Θα σας δείξουμε πολλές μεθόδους και παραδείγματα, ώστε να επιλέξετε αυτή που σας ταιριάζει καλύτερα.
Τι είναι το DIV
Το div είναι ένα στοιχείο HTML που χρησιμοποιείται δημιουργήστε ενότητες ή κοντέινερ σε μια ιστοσελίδα. Αυτό μπορεί να περιέχει άλλα στοιχεία, όπως κείμενο, εικόνες, συνδέσμους κ.λπ. Επίσης αυτό είναι ένα στοιχείο μπλοκ, που σημαίνει ότι καταλαμβάνει όλο το πλάτος της σελίδας και αυτό μπορείτε να ορίσετε το ύψος και το πλάτος του. Το div είναι ένα γενικό στοιχείο, που σημαίνει ότι δεν έχει συγκεκριμένη σημασιολογική σημασία. Για το λόγο αυτό, συνήθως χρησιμοποιείται με τα χαρακτηριστικά class ή id, για να δώσει στο div ένα όνομα ή μια κατηγορία. Επίσης χρησιμοποιείται συχνά με χαρακτηριστικό στυλ ή με φύλλα στυλ CSS, για να δώσει μια ματιά ή ένα σχέδιο στο div.
Ένα div χρησιμοποιείται για την οργάνωση και τη δομή του περιεχομένου μιας ιστοσελίδας και για την εφαρμογή ιδιοτήτων στυλ σε αυτήν. Με ένα div μπορείτε να δημιουργήσετε ένα πλαίσιο που περιέχει άλλα στοιχεία και που μπορεί να ευθυγραμμιστεί, να κεντραριστεί, να χρωματιστεί, να σκιαστεί κ.λπ. Η μορφή μπορεί επίσης να χρησιμοποιηθεί για δημιουργία στηλών ή σειρών, για τη διανομή περιεχομένου με τακτοποιημένο και ευέλικτο τρόπο. Γενικά μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία οπτικών ή διαδραστικών εφέ, όπως κινούμενα σχέδια, μεταβάσεις, μετασχηματισμοί κ.λπ.
Πώς να κεντράρετε μια εικόνα οριζόντια
Κεντράρετε μια εικόνα οριζόντια σε ένα DIV σημαίνει ευθυγράμμιση της εικόνας στο κέντρο το πλάτος του DIV. Υπάρχουν διάφοροι τρόποι για να γίνει αυτό, αλλά οι πιο συνηθισμένοι είναι οι ακόλουθοι:
- Χρησιμοποιώντας την ιδιότητα text-align: center. Αυτή η ιδιότητα εφαρμόζεται στο στοιχείο DIV και προκαλεί την οριζόντια ευθυγράμμιση όλων των στοιχείων εντός του DIV. Για παράδειγμα:
- Χρησιμοποιήστε το περιθώριο: αυτόματη ιδιοκτησία. Αυτή η ιδιότητα εφαρμόζεται στο στοιχείο IMG και αναγκάζει την εικόνα να έχει το ίδιο αριστερό και δεξί περιθώριο, κεντράροντάς την οριζόντια. Για να λειτουργήσει αυτό, η εικόνα πρέπει να έχει καθορισμένο πλάτος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
- Χρησιμοποιώντας την ιδιότητα μετασχηματισμού: translateX(). Αυτή η ιδιότητα εφαρμόζεται στο στοιχείο IMG και προκαλεί την οριζόντια μετακίνηση της εικόνας σε μια ορισμένη απόσταση από την αρχική της θέση. Για να το κεντράρετε οριζόντια, πρέπει να το μετακινήσετε το 50% του πλάτους του προς τα δεξιά. Για να λειτουργήσει, η εικόνα πρέπει να έχει καθορισμένο πλάτος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
Πώς να κεντράρετε μια εικόνα κάθετα
Κεντράρετε μια εικόνα κατακόρυφα σε ένα DIV σημαίνει ευθυγράμμιση της εικόνας στο κέντρο του ύψους του DIV. Υπάρχουν διάφοροι τρόποι για να το κάνετε, αλλά οι πιο συνηθισμένοι είναι οι ακόλουθοι:
- Χρησιμοποιήστε την ιδιότητα vertical-align: middle. Αυτή η ιδιότητα εφαρμόζεται στο στοιχείο IMG και προκαλεί την κατακόρυφη στοίχιση της εικόνας στο κέντρο σε σχέση με τη γραμμή βάσης του κειμένου. Για να λειτουργήσει αυτό, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να είναι τύπου inline ή να έχει την ιδιότητα display: inline. Για παράδειγμα:
- Χρησιμοποιώντας την ιδιότητα margin-top και margin-bottom. Αυτές οι ιδιότητες εφαρμόζονται στο στοιχείο IMG και αναγκάζουν την εικόνα να έχει τα ίδια περιθώρια στο επάνω και στο κάτω μέρος, τα οποία την κεντράρουν κατακόρυφα. Για να λειτουργήσει αυτό, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να έχει καθορισμένο ύψος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
- Χρησιμοποιήστε την ιδιότητα μετασχηματισμού: translateY(). Αυτή τη φορά εφαρμόζεται στο στοιχείο IMG και προκαλεί την κατακόρυφη μετακίνηση της εικόνας σε μια ορισμένη απόσταση από την αρχική της θέση. Για να το κεντράρετε κάθετα, πρέπει να το μετακινήσετε κατά 50% του ύψους του προς τα κάτω. Για να λειτουργήσει, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να έχει καθορισμένο ύψος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
Πώς να κεντράρετε μια εικόνα και στους δύο άξονες
Το κεντράρισμα μιας εικόνας και στους δύο άξονες σε ένα DIV σημαίνει ευθυγραμμίστε την εικόνα στο κέντρο τόσο του πλάτους όσο και του ύψους του DIV, αυτό είναι το πιο περίπλοκο. Υπάρχουν διάφοροι τρόποι για να το κάνετε, αλλά οι πιο συνηθισμένοι είναι οι ακόλουθοι:
- Χρησιμοποιώντας την ιδιότητα text-align: center και την ιδιότητα vertical-align: middle. Αυτές οι ιδιότητες ισχύουν για το στοιχείο DIV και το στοιχείο IMG αντίστοιχα και προκαλούν στοίχιση στο κέντρο της εικόνας τόσο οριζόντια όσο και κάθετα. Για να λειτουργήσει αυτό, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να είναι τύπου inline ή να έχει την ιδιότητα display: inline. Για παράδειγμα:
- Χρησιμοποιήστε το περιθώριο: αυτόματη ιδιοκτησία. Εδώ εφαρμόζεται στο στοιχείο IMG και προκαλεί την εικόνα να έχει ίσα περιθώρια και στις τέσσερις πλευρές, κεντράροντάς την και στους δύο άξονες. Για να λειτουργήσει, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να έχει καθορισμένο πλάτος και ύψος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
- Χρησιμοποιήστε την ιδιότητα transform: translate().. Σε αυτή την περίπτωση εφαρμόζεται στο στοιχείο IMG και αναγκάζει την εικόνα να μετακινηθεί σε μια ορισμένη απόσταση από την αρχική της θέση και στους δύο άξονες. Για να το κεντράρετε, πρέπει να το μετακινήσετε το 50% του πλάτους του προς τα δεξιά και το 50% του ύψους του προς τα κάτω. Για να λειτουργήσει, το στοιχείο DIV πρέπει να έχει καθορισμένο ύψος και το στοιχείο IMG πρέπει να έχει καθορισμένο πλάτος και ύψος και να είναι τύπου μπλοκ ή να έχει την ιδιότητα εμφάνιση: μπλοκ. Για παράδειγμα:
Κεντράρετε οποιαδήποτε εικόνα
Το κεντράρισμα μιας εικόνας σε ένα DIV μπορεί να είναι χρήσιμο για να βελτιώσετε την εμφάνιση και την οργάνωση του ιστότοπού σας, και για να επισημάνετε την εικόνα που θέλετε να εμφανίσετε. Το κεντράρισμα μιας εικόνας σε ένα DIV δεν είναι δύσκολο, αλλά εξαρτάται από πολλούς παράγοντες όπως ο τύπος της εικόνας, το μέγεθος του DIV, το στυλ του DIV κ.λπ.
Σε αυτό το άρθρο Έχουμε εξηγήσει πώς να κεντράρετε μια εικόνα σε ένα DIV χρησιμοποιώντας HTML και CSS, οι οποίες είναι οι γλώσσες προγραμματισμού που χρησιμοποιούνται για τη δημιουργία και το σχεδιασμό ιστοσελίδων. Σας έχουμε δείξει διάφορες μεθόδους και παραδείγματα για να διαλέξετε. αυτό που σας ταιριάζει καλύτερα.
Ελπίζουμε να σας άρεσε αυτό το άρθρο και ότι μάθατε πώς να κεντράρετε μια εικόνα σε ένα DIV. Εάν έχετε οποιεσδήποτε ερωτήσεις ή προτάσεις, αφήστε μας ένα σχόλιο. Μπορείτε επίσης να μοιραστείτε αυτό το άρθρο με τους φίλους ή την οικογένειά σας που τους αρέσει επίσης HTML ή CSS. Ας πιάσουμε δουλειά και προγραμματίζουμε!