Centralize uma imagem em CSS

1. Use as propriedades display e margin para centralizar uma imagem em CSS
2. Use a propriedade text-align para centralizar uma imagem em CSS
3. Use a propriedade CSS flexbox para centralizar uma imagem

Neste artigo, apresentaremos três métodos para centralizar uma imagem em HTML com a ajuda de CSS.

Use as propriedades display e margin para centralizar uma imagem em CSS

Podemos usar as propriedades CSS display e margin juntas para centralizar uma imagem. A propriedade display da imagem é inicialmente inline. Portanto, podemos adicionar várias imagens em uma linha. Por exemplo, se escrevermos o código a seguir, podemos ver duas imagens em uma linha.

<img src="apple.jpg" alt="apple"/>
<img src="banana.jpg" alt="banana" /> 

Portanto, temos que alterar a propriedade display da imagem para block para que apenas uma imagem seja colocada em uma linha. Então, podemos dar à imagem margin de 0px auto para centralizá-la. A imagem terá uma margem de 0px na parte superior e inferior. O primeiro valor pode ser qualquer número, mas o segundo valor deve ser auto. O auto dá à imagem uma margem que a coloca bem no centro. Este processo só funciona se tivermos que centralizar apenas uma imagem em uma linha.

Por exemplo, crie um documento HTML e coloque uma imagem usando a tag img. Escreva o valor src corretamente e escreva um alt para tornar a imagem significativa quando a imagem não for exibida por algum motivo. Use a imagem de espaço reservado https://loremflickr.com/320/240 no atributo src. Em CSS, defina a propriedade display como block e dê a ela margin de 0px auto. O primeiro valor de margem é definido para qualquer número de acordo com nossos requisitos.

O exemplo abaixo mostra que a imagem está centrada conforme definimos o valor display para block e damos a ele uma margem de 0px auto.

Código de exemplo:

<img src="/img/DelftStack/logo.png" alt="Logo" />

img{
 display: block;
 margin: 0px auto;
}

Use a propriedade text-align para centralizar uma imagem em CSS

Podemos usar a propriedade CSS text-align para centralizar uma imagem. Podemos envolver uma imagem dentro de um div e definir a propriedade text-align para center, então a imagem será centralizada. Este método pode centralizar várias imagens em uma linha, ao contrário do método anterior, que centralizava apenas uma imagem. Podemos usar esse método para imagens únicas e múltiplas.

Por exemplo, crie um div e atribua a ele uma classe de parent. Então, dentro de div, use a tag img para fazer o upload de uma imagem. Defina src como https://loremflickr.com/320/240 e alt como cat. Em CSS, selecione div usando seu nome de classe, ou seja, .parent e defina sua propriedade text-align para center.

O exemplo abaixo mostra que a imagem dentro da div está centralizada conforme definimos a propriedade CSS text-align de div como center.

Código de exemplo:

<div class="parent">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.parent{
 text-align : center;
}

Use a propriedade CSS flexbox para centralizar uma imagem

Flexbox é uma das tecnologias CSS mais utilizadas. A ideia principal por trás do flexbox é dar ao contêiner a capacidade de alterar seus itens. Podemos usar as propriedades flexbox dentro de um contêiner definindo a propriedade display como flex. Então, podemos usar a propriedade justify-content: center para centralizar os itens ou imagens dentro do contêiner horizontalmente. Podemos definir a propriedade align-items como center para centralizar os itens verticalmente.

Por exemplo, crie um div e dê a ele o nome de classe container. Em seguida, coloque uma imagem dentro de div usando a tag img com src e alt. Selecione o div usando seu nome de classe, por exemplo, .container e defina sua propriedade display como flex. Em seguida, defina a propriedade justify-content flexbox como center.

O exemplo abaixo mostra que a imagem dentro de div é centralizada usando as propriedades flexbox.

<div class="container">
 <img src="/img/DelftStack/logo.png" alt="Logo" />
</div>

.container{
 display: flex;
 justify-content: center;
}