CSS nos ajuda a controlar a exibição de imagens em aplicações web. A centralização de imagens ou textos é uma tarefa comum em CSS. Para centralizar uma imagem, temos que definir o valor de margem esquerda e margem direita para auto e torná-lo um elemento de bloco usando o exibição: bloco; propriedade.
Se a imagem estiver no elemento div, então podemos usar o alinhamento de texto: centro; propriedade para alinhar a imagem ao centro na div.
O elemento é considerado um elemento embutido que pode ser facilmente centralizado aplicando o alinhamento de texto: centro; propriedade de CSS para o elemento pai que o contém.
Nota: A imagem não pode ser centralizada se a largura estiver definida como 100% (largura total).
Podemos usar a propriedade abreviada margem e configure-o para auto para alinhar a imagem no centro, em vez de usar o margem esquerda e margem direita propriedade.
Vamos ver como centralizar uma imagem aplicando alinhamento de texto: centro; propriedade ao seu elemento pai.
Exemplo
Neste exemplo, estamos alinhando as imagens usando o alinhamento de texto: centro; propriedade. A imagem está no elemento div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Teste agora Saída
Exemplo
Agora, estamos usando o margem esquerda: automático; margem direita: automático; e exibição: bloco; propriedades para alinhar a imagem ao centro.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Teste agora Saída
