1.9 KiB
1.9 KiB
title | localeTitle |
---|---|
Center an Image Using Text Align Center | Centralizar uma imagem usando o centro de alinhamento de texto |
Centralizar uma imagem usando o centro de alinhamento de texto
Um elemento <img>
é um elemento embutido (valor de exibição do inline-block
). Ele pode ser facilmente centralizado adicionando o text-align: center;
Propriedade CSS para o elemento pai que contém.
Para centralizar uma imagem usando text-align: center;
você deve colocar o <img>
dentro de um elemento de nível de bloco, como um div
. Como a propriedade text-align
só se aplica a elementos no nível de bloco, você coloca text-align: center;
no elemento de nível de bloco de acondicionamento para alcançar um <img>
horizontalmente centrado.
Exemplo
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
Nota: O elemento pai deve ser um elemento de bloco. Se não for um elemento de bloco, você deve adicionar display: block;
Propriedade CSS junto com a propriedade text-align
.
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
Demonstração: Codepen