Περιεχόμενο

• Βήματα
• Μέθοδος 1 από 2: CSS (συνιστάται)
• Μέθοδος 2 από 2: Το χαρακτηριστικό "στοίχιση" σε HTML

Χαρακτηριστικό ευθυγραμμίζω ετικέτα html> έχει καταργηθεί από την HTML5. Ενώ αυτό το χαρακτηριστικό εξακολουθεί να λειτουργεί στα περισσότερα προγράμματα περιήγησης ιστού, συνιστάται η ευθυγράμμιση των εικόνων χρησιμοποιώντας Cascading Style Sheets (CSS). Σε αυτό το άρθρο, θα σας δείξουμε πώς να κεντράρετε εικόνες χρησιμοποιώντας το CSS και την ετικέτα που έχει καταργηθεί. ευθυγραμμίζω.

Βήματα

Μέθοδος 1 από 2: CSS (συνιστάται)

1. 1 Προσθέστε κώδικα HTML για την εικόνα. Θα χρησιμοποιήσετε διαδοχικά φύλλα στυλ (CSS) για να ευθυγραμμίσετε την εικόνα, αλλά θα πρέπει να την τοποθετήσετε στη σελίδα χρησιμοποιώντας HTML. Ακολουθεί ένα παράδειγμα χρήσης της ετικέτας img> για να εισαγάγετε μια εικόνα στον κωδικό σας:

   img src = "dog.webp" alt = "αυτή είναι μια εικόνα ενός σκύλου">

   • Αντί dog.webp αντικαταστήστε το όνομα του αρχείου εικόνας και μετά το "alt" εισαγάγετε την περιγραφή της εικόνας. Εννοια κέντρο για "κλάση" μην αλλάξετε, επειδή θα δημιουργήσετε μια κλάση CSS με αυτό το όνομα.
2. 2 Βρείτε τον κώδικα CSS. Εάν ο ιστότοπός σας διαθέτει ξεχωριστό αρχείο CSS, ανοίξτε το. Εάν όχι, το CSS είναι πιθανότατα στην κορυφή του αρχείου HTML, μέσα στις ετικέτες κεφάλι>... Μεταβείτε στην κορυφή του αρχείου για να βρείτε ετικέτες στυλ> / ​​στυλ>.
   • Εάν ετικέτες στυλ> / ​​στυλ> όχι, προσθέστε τα. Διαβάστε αυτό το άρθρο για περισσότερες πληροφορίες.
3. 3 Προσθέστε CSS για να ευθυγραμμίσετε την εικόνα. Αντί για "50%", μπορείτε να εισαγάγετε μια διαφορετική τιμή για να εμφανιστεί η εικόνα στη σελίδα. Δεν θα μπορείτε να κεντράρετε την εικόνα με τιμή "100%", οπότε αυτός ο αριθμός θα πρέπει να είναι διαφορετικός.

   .center {display: block; margin-left: auto; margin-right: auto; πλάτος: 50%; }

4. 4 Αποθηκεύστε τις αλλαγές σας. Αποθηκεύστε το αρχείο HTML και το αρχείο CSS (εάν υπάρχουν). Αυτό θα κεντράρει την εικόνα.
   • Επίσης μέσα σε ετικέτες img> μπορεί να προσθέσει για να κεντράρετε άλλες εικόνες.

Μέθοδος 2 από 2: Το χαρακτηριστικό "στοίχιση" σε HTML

1. 1 Δημιουργήστε μια νέα παράγραφο. Αν και αυτή η μέθοδος κεντραρίσματος εικόνων έχει καταργηθεί, εξακολουθεί να λειτουργεί σε πολλά προγράμματα περιήγησης. Ωστόσο, προτείνουμε τη χρήση CSS για να διατηρήσετε τη λειτουργία του ιστότοπου όταν τα προγράμματα περιήγησης σταματήσουν να υποστηρίζουν το καθορισμένο χαρακτηριστικό. Θυμηθείτε ότι το χαρακτηριστικό ευθυγραμμίζω θα κεντράρει την εικόνα μόνο μέσα στο στοιχείο που την περιβάλλει (για παράδειγμα, μέσα σε ετικέτες p> / p> ή div> / div>). Για παράδειγμα, στο αρχείο HTML, θα δημιουργήσουμε μια νέα παράγραφο προσθέτοντας p> σε ξεχωριστή γραμμή.
2. 2 Προσθέστε κώδικα HTML για την εικόνα. Εισαγάγετε τον ακόλουθο κώδικα μετά την ετικέτα p>... Χρησιμοποιήστε αυτό το παράδειγμα ως οδηγό:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • Αντί dog.webp αντικαταστήστε το όνομα του αρχείου εικόνας και μετά το "alt" εισαγάγετε την περιγραφή της εικόνας.
   • Το μεσαίο χαρακτηριστικό λέει στο πρόγραμμα περιήγησης να εμφανίσει την εικόνα στο κέντρο της σελίδας.
3. 3 Κλείστε την ετικέτα της παραγράφου. Για να το κάνετε αυτό, προσθέστε / p> μετά την ετικέτα εικόνας. Ο τελικός κώδικας πρέπει να μοιάζει κάπως έτσι:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 Αποθηκεύστε τις αλλαγές σας. Αυτό θα κεντράρει την εικόνα.