logo

Hoe een afbeelding in HTML uit te lijnen

Als we de afbeelding met behulp van de HTML-tag naar de verschillende locaties op de webpagina willen verplaatsen, moeten we de onderstaande stappen volgen.

Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we een afbeelding willen uitlijnen:

 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"> 

Stap 2: Plaats nu de cursor in het tag van de afbeelding die we willen uitlijnen. En dan moeten we het align-attribuut van de img-tag gebruiken om de locatie op te geven. We moeten dus het align-attribuut typen zoals beschreven in het volgende blok.

 <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> 

Stap 3: Nadat we de locatie hebben opgegeven, moeten we de HTML-code opslaan en vervolgens het bestand uitvoeren. Er zijn verschillende HTML-codes die de afbeelding in de paragraaf op de verschillende locaties weergeven:

1. Midden

Met deze uitlijningswaarde wordt de afbeelding in het midden geplaatst.

 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 het nu

De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:

Afbeelding uitlijnen in HTML

2. Bovenkant

Met deze uitlijningswaarde wordt de afbeelding bovenaan geplaatst.

 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 het nu

De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:

Afbeelding uitlijnen in HTML

3. Onderkant

Met deze uitlijningswaarde wordt de afbeelding onderaan geplaatst.

 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 het nu

De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:

Afbeelding uitlijnen in HTML

4 over

Met deze uitlijningswaarde wordt de afbeelding aan de linkerkant ingesteld.

 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 het nu

De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:

Afbeelding uitlijnen in HTML

5. Juist

Met deze uitlijningswaarde wordt de afbeelding rechts geplaatst.

 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 het nu

De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:

Afbeelding uitlijnen in HTML