Alinhar imagem com CSS – como alinhar imagem no site

Alinhar imagem no CSS é muito simples, principalmente se for alinhar à direita ou esquerda. Centralizar imagem no CSS é um pouco diferente, mas não deixa de ser relativamente fácil.

Você pode posicionar uma imagem em qualquer lugar da página com CSS. Aqui você vai aprender a alinhar as imagens á direita, à esquerda e a centralizar em relação ao texto.

Alinhar imagem à direita e a esquerda no CSS

É muito fácil alinhar imagem no CSS, seja à direita ou esquerda. Tudo que você tem de fazer é usar o float mais a posição que você quer a imagem.

.alinhar-direita { float:right; 0 0 10px 10px; }

.align-esquerda { float:left; 0 10px 10px 0;}

Basta adicionar os códigos acima ao seu stylesheet. As margens são importantes para que não fiquem espaços desnecessários no alinhamento entre o texto e à imagem

Como centralizar imagem com CSS

Centralizar a imagem com CSS é um pouco diferente de alinhar á direita por exemplo. Não existe o código float:center então teremos de aplicar a estrutura a seguir:

img { display: block; margin-left: auto; margin-right: auto }

O código acima transforma a imagem em um bloco, o que torna desnecessário acrescentar uma <div> ou <p> extra. em torno da imagem. Em seguida, ele informa ao navegador para exibir as margens direita e esquerda em auto.

Quando você define esquerda e direita como “auto”, o que você está realmente fazendo é dizer ao navegador que você deseja que as margens esquerda e direita devem ser iguais – o que é a mesma coisa que dizer que você quer centralizar a imagem no CSS.