Si volem moure la imatge a les diferents ubicacions de la pàgina web mitjançant l'etiqueta Html, haurem de seguir els passos que es detallen a continuació.

Pas 1: En primer lloc, hem d'escriure el codi Html en qualsevol editor de text o obrir el fitxer Html existent a l'editor de text en el qual volem alinear una imatge:

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

Pas 2: Ara, col·loca el cursor dins de etiqueta de la imatge que volem alinear. I després, hem d'utilitzar l'atribut align de l'etiqueta img per especificar la ubicació. Per tant, hem d'escriure l'atribut align tal com es descriu al bloc següent.

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

Pas 3: Després d'especificar la ubicació, hem de desar el codi HTML i després executar el fitxer. Hi ha diversos codis HTML que mostren la imatge del paràgraf a les diferents ubicacions:

1. Mitjà

Aquest valor d'alineació posa la imatge al mig.

 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> 

La sortida del codi HTML anterior es mostra a la següent captura de pantalla:

2. A dalt

Aquest valor d'alineació estableix la imatge a la part superior.

 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> 

La sortida del codi HTML anterior es mostra a la següent captura de pantalla:

3. A baix

Aquest valor d'alineació estableix la imatge a la part inferior.

 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> 

La sortida del codi HTML anterior es mostra a la següent captura de pantalla:

4. Esquerra

Aquest valor d'alineació estableix la imatge a l'esquerra.

 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> 

La sortida del codi HTML anterior es mostra a la següent captura de pantalla:

5. Dret

Aquest valor d'alineació estableix la imatge a la dreta.

 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> 

La sortida del codi HTML anterior es mostra a la següent captura de pantalla: