Τι πρέπει να γνωρίζετε
- Στο HTML, τοποθετήστε μια ετικέτα div γύρω από την εικόνα:
- Προσθέστε ένα χαρακτηριστικό στυλ:
- Ορίστε το πλάτος div στο πλάτος της εικόνας, προσθέστε μια ιδιότητα ευθυγράμμισης κειμένου, προσθέστε κενό μεταξύ της εικόνας και της λεζάντας και, στη συνέχεια, προσθέστε τη λεζάντα κειμένου.
Αυτό το άρθρο εξηγεί πώς μπορείτε να προσθέσετε λεζάντα στην εικόνα ιστού σας και να βεβαιωθείτε ότι ο υπότιτλος παραμένει με την εικόνα σας όπου κι αν τη μετακινήσετε στην ιστοσελίδα.
Βήματα για μια λεζάντα εικόνας HTML
Οι λεζάντες εικόνων είναι σημαντικοί επειδή προσθέτουν επιπλέον πληροφορίες στα οπτικά στοιχεία της ιστοσελίδας σας.
-
Προσθέστε μια εικόνα στην ιστοσελίδα σας.
-
Στο HTML για την ιστοσελίδα σας, τοποθετήστε μια ετικέτα div γύρω από την εικόνα:
type = «code»>
-
Προσθέστε ένα χαρακτηριστικό στυλ στην ετικέτα div:
type = «code»>
-
Ορίστε το πλάτος του div στο ίδιο πλάτος με την εικόνα, με την ιδιότητα στυλ πλάτους:
type = «code»>
-
Για λεζάντες που είναι ελαφρώς μικρότεροι από το περιβάλλον κείμενο, προσθέστε μια ιδιότητα μεγέθους γραμματοσειράς στο στυλ div:
type = «code»>
-
Οι υπότιτλοι φαίνονται καλύτερα αν βρίσκονται στο κέντρο κάτω από την εικόνα, οπότε προσθέστε μια ιδιότητα ευθυγράμμισης κειμένου στο χαρακτηριστικό στυλ:
type = «code»>
-
Τέλος, προσθέστε λίγο επιπλέον χώρο μεταξύ της εικόνας και της λεζάντας, προσθέτοντας ένα χαρακτηριστικό στυλ στην εικόνα με μια ιδιότητα στιλ padding-bottom:
type = «code»>
-
Στη συνέχεια, προσθέστε τη λεζάντα κειμένου ακριβώς κάτω από την εικόνα:
Αυτός είναι ο υπότιτλος μου = «code»> Ανεβάστε την ιστοσελίδα στον διακομιστή σας και δοκιμάστε τη σε ένα πρόγραμμα περιήγησης.
Συμβουλές για λεζάντες
Οι διαστάσεις CSS μπορούν να είναι σε πολλές διαφορετικές μετρήσεις, επομένως συνήθως πρέπει να συμπεριλάβετε τον τύπο μέτρησης. Για παράδειγμα: Ωστόσο, οι διαστάσεις εικόνας HTML είναι πάντα σε εικονοστοιχεία, επομένως αφήνετε τη μέτρηση εκτός λειτουργίας. Εάν κάνετε το πλάτος του div ευρύτερο από το πλάτος της εικόνας, ο υπότιτλος μπορεί να εμφανίζεται δίπλα στην εικόνα. Εάν αυτό είναι αυτό που θέλετε, προσθέστε ένα
ετικέτα αμέσως πριν από τη λεζάντα και μετά την ετικέτα εικόνας.