Hvis vi ønsker at flytte billedet til de forskellige steder på websiden ved hjælp af HTML-tagget, skal vi følge trinene, som er angivet nedenfor.
Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvor vi vil justere et billede:
Align an Image Hello User! This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp">
Trin 2: Placer nu markøren inde i tag på det billede, som vi vil justere. Og så skal vi bruge align-attributten for img-tagget til at angive placeringen. Så vi skal skrive align-attributten som den samme som beskrevet i den følgende blok.
<img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt>
Trin 3: Efter at have angivet placeringen, skal vi gemme HTML-koden og derefter køre filen. Der er følgende forskellige HTML-koder, som viser billedet i afsnittet på de forskellige steder:
1. Midten
Denne justeringsværdi sætter billedet i midten.
Align an Image at middle Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
2. Top
Denne justeringsværdi sætter billedet øverst.
Align an Image at Top Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
3. Bund
Denne justeringsværdi sætter billedet i bunden.
Align an Image at bottom Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
4. Venstre
Denne justeringsværdi indstiller billedet til venstre.
Align an Image at left Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
5. Rigtigt
Denne justeringsværdi sætter billedet til højre.
Align an Image at Right Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p>Test det nu
Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
