logo

Cómo alinear una imagen en HTML

Si queremos mover la imagen a las diferentes ubicaciones de la página web usando la etiqueta HTML, debemos seguir los pasos que se detallan a continuación.

Paso 1: En primer lugar, tenemos que escribir el código HTML en cualquier editor de texto o abrir el archivo HTML existente en el editor de texto en el que queremos alinear una imagen:

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

Paso 2: Ahora, coloque el cursor dentro del etiqueta de esa imagen que queremos alinear. Y luego, tenemos que usar el atributo align de la etiqueta img para especificar la ubicación. Entonces, tenemos que escribir el atributo de alineación como se describe en el siguiente bloque.

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

Paso 3: Después de especificar la ubicación, debemos guardar el código HTML y luego ejecutar el archivo. Existen los siguientes códigos HTML que muestran la imagen del párrafo en las diferentes ubicaciones:

1. Medio

Este valor de alineación establece la imagen en el medio.

 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> 
Pruébalo ahora

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla:

Cómo alinear una imagen en HTML

2. arriba

Este valor de alineación establece la imagen en la parte 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> 
Pruébalo ahora

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla:

Cómo alinear una imagen en HTML

3. Abajo

Este valor de alineación establece la imagen en la parte 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> 
Pruébalo ahora

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla:

Cómo alinear una imagen en HTML

quedan 4

Este valor de alineación establece la imagen a la izquierda.

 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> 
Pruébalo ahora

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla:

Cómo alinear una imagen en HTML

5. Correcto

Este valor de alineación establece la imagen a la derecha.

 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> 
Pruébalo ahora

El resultado del código HTML anterior se muestra en la siguiente captura de pantalla:

Cómo alinear una imagen en HTML