logo

Como alinhar imagem em HTML

Se quisermos mover a imagem para diferentes locais da página web usando a tag Html, temos que seguir os passos abaixo.

Passo 1: Primeiramente, temos que digitar o código HTML em qualquer editor de texto ou abrir o arquivo HTML existente no editor de texto no qual queremos alinhar uma imagem:

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

Passo 2: Agora, coloque o cursor dentro do tag daquela imagem que queremos alinhar. E então, temos que usar o atributo align da tag img para especificar a localização. Portanto, temos que digitar o atributo align conforme descrito no bloco a seguir.

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

Etapa 3: Após especificar o local, temos que salvar o código HTML e então executar o arquivo. Existem vários códigos HTML a seguir que mostram a imagem no parágrafo em diferentes locais:

1. Meio

Este valor de alinhamento define a imagem no meio.

 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> 
Teste agora

A saída do código HTML acima é mostrada na captura de tela a seguir:

Como alinhar imagem em HTML

2. Superior

Este valor de alinhamento define a imagem no topo.

 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> 
Teste agora

A saída do código HTML acima é mostrada na captura de tela a seguir:

Como alinhar imagem em HTML

3. Parte inferior

Este valor de alinhamento define a imagem na 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> 
Teste agora

A saída do código HTML acima é mostrada na captura de tela a seguir:

Como alinhar imagem em HTML

4. Esquerda

Este valor de alinhamento define a imagem à esquerda.

 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> 
Teste agora

A saída do código HTML acima é mostrada na captura de tela a seguir:

Como alinhar imagem em HTML

5. Certo

Este valor de alinhamento define a imagem à direita.

 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> 
Teste agora

A saída do código HTML acima é mostrada na captura de tela a seguir:

Como alinhar imagem em HTML