As imagens são uma parte importante de qualquer aplicativo da web. Geralmente não é recomendado incluir muitas imagens em um aplicativo da web, mas é importante usar as imagens sempre que forem necessárias. CSS nos ajuda a controlar a exibição de imagens em aplicações web.

Alinhar uma imagem significa posicioná-la no centro, à esquerda e à direita. Podemos usar o flutuador propriedade e alinhamento de texto propriedade para o alinhamento de imagens.

Se a imagem estiver no elemento div, então podemos usar o alinhamento de texto propriedade para alinhar a imagem na div.

Exemplo

Neste exemplo, estamos alinhando as imagens usando o alinhamento de texto propriedade. As imagens estão no elemento div.

 div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 

Teste agora

Saída

Usando a propriedade float

A propriedade float CSS é uma propriedade de posicionamento. É usado para empurrar um elemento para a esquerda ou direita, permitindo que outros elementos o envolvam. Geralmente é usado com imagens e layouts.

Os elementos flutuam apenas horizontalmente. Portanto, só é possível flutuar elementos para a esquerda ou para a direita, não para cima ou para baixo. Um elemento flutuante pode ser movido o mais para a esquerda ou para a direita possível. Simplesmente, significa que um elemento flutuante pode ser exibido na extrema esquerda ou na extrema direita.

Exemplo

 img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 

Saída