Você gostaria de 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 alguns passos.
Tal como acontece com muitas tarefas de web design, há mais de uma maneira de fazer isso! Abordaremos alguns dos principais métodos neste artigo. Vamos começar! Verificar Como editar páginas da Web no Safari com Inspect Element.
1. Use o recurso de margem
Definir a propriedade margin é uma das maneiras mais fáceis de centralizar uma imagem horizontalmente usando CSS. As margens são um componente essencial de um modelo de caixa CSS.
Primeiro, você precisará converter o elemento de imagem de um elemento embutido em um elemento de bloco. Elementos HTML em nível de bloco ocupam a largura total de seu elemento pai e podem consumir a largura total de uma página.
Ao tornar o elemento de imagem 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 escolhida, a imagem deve ter margens iguais à esquerda e à direita. Você pode conseguir isso facilmente dando à propriedade Margin um valor automático:
img.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
} 2. Use o layout Flexbox
Este método requer colocar a imagem em um elemento de nível de bloco, geralmente um div:
<div class=”center”> <img src=”xyz.jpg”> </div>
Depois de fazer isso, você pode adicionar algumas propriedades para controlar sua aparência. Você estará usando duas propriedades CSS.
A primeira é a propriedade largura com seu valor definido como flex. Você também pode usar flex para alinhar elementos em HTML. A segunda propriedade que você adicionará ao div é justify-content , com seu valor definido como center da seguinte forma:
div.center {
display: flex;
justify-content: center;
} 3. Use o elemento de centralização
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. A tag center, que centraliza seu conteúdo horizontalmente, está obsoleta no HTML5.
Mas se você precisar, veja como centralizar uma imagem usando apenas HTML. Simplesmente envolva a tag img dentro da tag central assim:
<center> <img src=”xyz.jpg”> </center>
Isto é como alinhar suas imagens HTML
Mostramos três maneiras diferentes e fáceis de usar para centralizar suas imagens em um documento HTML. Experimente todos eles e escolha o 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 algumas outras maneiras de centralizar imagens usando HTML e CSS. Um método comum que funciona com texto e imagens embutidas é o recurso de alinhamento de texto. Agora você pode visualizar Jogos divertidos para ajudá-lo a aprender programação CSS facilmente.
