Como centralizar imagens com CSS

Procurando centralizar uma imagem usando CSS? Problemas de alinhamento geralmente são uma fonte de frustração para web designers. Felizmente, centralizar uma imagem com CSS é muito simples, e mostraremos como fazer isso em algumas etapas.

Tal como acontece com muitas tarefas de web design, há mais de uma maneira de fazer isso! Abordaremos três métodos principais neste artigo. Vamos começar!

1. Use a propriedade margin

Configurando o margem é uma das maneiras mais fáceis de centralizar horizontalmente uma imagem usando CSS. As margens são um componente central da o modelo de caixa CSS.

Primeiro, você precisará transformar o elemento de imagem de um inline para um bloco. Elementos HTML em nível de bloco ocupam a largura total de seu elemento pai e são capazes de ocupar toda a largura de uma página.

Ao transformar um elemento de imagem em um elemento de bloco, você pode manipular sua posição ajustando suas margens horizontais. Você também precisará definir uma largura específica para a imagem, para determinar quanto espaço a imagem ocupa na página.

Qualquer que seja a largura que você escolher, a imagem precisará ter margens esquerda e direita iguais. Você pode conseguir isso facilmente dando à propriedade margin um valor de auto:

img.center {
 exibição: bloco;
 margem esquerda: auto;
 margem direita: auto;
 largura: 800px;
}

2. Usar layout Flexbox

Este método requer colocar a imagem em um elemento de nível de bloco, geralmente um div:

Depois de fazer isso, você pode adicionar algumas propriedades para manipular sua aparência. Você usará duas propriedades CSS.

O primeiro é o mostrar propriedade com seu valor definido como flexionar. Você também pode use flex para alinhar elementos em HTML. A segunda propriedade que você adicionará ao seu div é justificar-conteúdo, com seu valor definido para Centro igual a:

div.center {
 exibição: flexível;
 justificar-conteúdo: centro;
}

3. Use o elemento central obsoleto

As práticas recomendadas da Web incentivam você a usar CSS para estilo e HTML para semântica, portanto, você não deve usar esse método HTML. o Centro tag, que centraliza seu conteúdo horizontalmente, está obsoleta em HTML5.

Mas se você precisar, aqui está como centralizar uma imagem usando apenas HTML. Basta enrolar o imagem tag em uma tag central assim:

É assim que alinhar suas imagens em HTML

Mostramos três métodos diferentes e fáceis de usar para centralizar suas imagens em um documento HTML. Experimente todos eles e escolha aquele que funciona melhor para você. Evite o terceiro método, a menos que você não tenha absolutamente nenhuma escolha!

Uma coisa a ter em mente é que existem mais algumas maneiras de centralizar imagens usando HTML e CSS. Um método comum que funciona tanto para texto quanto para imagens embutidas é o alinhamento de texto propriedade.

Como centralizar o texto em sua página da Web com CSS

Leia a seguir

Sobre o autor