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"> Teste agora Saída
