Centralizar Imagem CSS – Confira o Passo a Passo Para Iniciantes

Centralizar imagem CSS nem sempre é uma tarefa fácil para desenvolvedores iniciantes. Porém, é um recurso muito comum utilizado na centralização de textos e imagens durante uma formatação.

Mesmo sendo comum e muito utilizado, ainda há quem encontre dificuldades em utilizar o CSS para centralizar imagens na horizontal e vertical.

Por isso, neste post vamos te ensinar o passo a passo para você centralizar imagens e mostrar algumas das maneiras mais usadas de CSS.

O que é CSS?

Antes de dar início a nossa explicação, você deve saber um pouco mais sobre CSS, confira.

O CSS (Cascading Style Sheet, ou Folha de Estilo em Cascatas) trata-se de uma linguagem de marcação utilizada em HTML ou XHTML, e dá diversas possibilidades para a formatação de uma página.

Sendo assim, esse recurso ajuda a alinhar uma imagem ou texto, editar, remover e trabalhar no espaço entre os elementos dentro de uma página.

O CSS surgiu em 1996, com a necessidade de complementar o HTML, porque este necessita de escrita para marcação da página. No entanto, todo esse processo se tornou caro e muito desgastante para os desenvolvedores.

Então, para tornar esse processo mais ágil, surgiu a necessidade de criar uma alternativa para complementar o HTML, o CSS que torna a formatação mais rápida, prática e produtiva.

Dessa forma, as tags de CSS separam os conteúdos como: cor, imagem, texto, fonte, e espaçamento entre blocos.

Enfim, ele tem a tarefa de tornar uma apresentação mais agradável, atrativa, e de fácil entendimento como um todo em uma página.

Veja também: Lista completa com os melhores cursos gratuitos com certificado.

CSS: para que serve e seus benefícios

Agora que você sabe quando surgiu o CSS, vamos te mostrar onde ele é utilizado e os benefícios que ele traz para a formatação e programação. Veja a seguir.

Uma das funções mais usadas no CSS, é centralização. Sendo as principais:

• Centralização de blocos de texto ou imagem;
• Deixar textos centralizados;
• Centralizar uma imagem na vertical ou horizontal.

Contudo, podemos usar o CSS para outras criações como a criação de animações. Dentro desse desenvolvimento ele proporciona uma experiência mais atrativa aos usuários em comparação com páginas estáticas, ou seja, ele torna a página mais dinâmica.

Ele também é utilizado na criação de efeitos visuais para criar layouts diferenciados e sobrepostos com imagens que possuem profundidade, e em sites dinâmicos para personalizar caixas ou textos que mudam de cor.

O CSS, ainda é responsável pela captação de dados dos visitantes em Landings pages. Ou seja, páginas que contam com preenchimento de dados em formulários e componentes gráficos.

Então, diante das múltiplas formas de usar o CSS quais benefícios ele pode trazer?

Um dos benefícios, é a possibilidade de múltiplas personalizações, com diversas possibilidades de formatação em uma página HTML. Dessa forma, os erros são reduzidos e a produtividade é maior.

Além de outros benefícios proporcionados pela funcionalidade do CSS, também podemos citar:

• Folhas de estilo multifuncionais;
• Códigos mais organizados;
• Mudanças mais simples no visual da página;
• Mesma formatação em Layouts responsivos em diferentes navegadores;
• Controle de diversos documentos a partir de um único arquivo.

Bom, agora que você já sabe um pouco sobre CSS e a utilidade dela, vamos te mostrar algumas formas de como aplicar o CSS para centralizar uma imagem. Veja a seguir.

Veja também: Lista completa com os melhores cursos gratuitos com certificado.

Como centralizar imagem CSS?

Centralizar uma imagem dentro utilizando o CSS não é tão difícil como você imagina, porém você deve prestar atenção nos códigos utilizados.

O primeiro código que vamos te apresentar é o display e margin, confira o código de exemplo:

<img src="table.jpg" alt="table"/>
<img src="chair.jpg" alt="chair" /> 
img {
    display: block;
    margin: 0px auto;
}

<img src="table.jpg" alt="table"/>
<img src="chair.jpg" alt="chair" /> 
img {
    display: block;
    margin: 0px auto;
}

Os dois códigos acima representam duas imagens centralizadas, e podem ser usados juntos para centralizar uma imagem em CSS.

No entanto, para você alterar a propriedade de uma imagem ou colocá-la em outra linha, devemos usar o margin de 0px auto para centralizá-la. Assim sendo, a imagem da página terá uma margem de 0px tanto na parte inferior quanto na parte superior.

Já, para centralizar apenas uma imagem, a propriedade display deve ser alterada para block. Dessa forma apenas uma imagem é colocada na linha.

O segundo valor, entretanto, deve sempre ser auto para colocar a imagem bem no centro, contudo esse recurso funciona apenas para uma imagem de cada vez.

Contudo, além dessa, há outras formas e propriedades para centralizar uma imagem. Como por exemplo:

Text-Align: método utilizado para alinhar textos ou imagem dentro de um contêiner;

Margin: Auto: usado para centralizar imagens nas margens esquerda e direita automaticamente;

Display: Flex: bastante flexível na formatação ele é utilizado para dispor elementos dentro de um contêiner em linhas ou colunas em qualquer posição e tamanho.

Agora que você conhece alguns dos códigos vamos mostrar o passo a passo para centralizar uma imagem usando CSS. Confira a seguir.

Veja também: Lista completa com os melhores cursos gratuitos com certificado.

Passo a passo para centralizar uma imagem

Enfim, confira o passo a passo para centralizar uma imagem CSS usando as seguintes propriedades: position e transform juntas na mesma imagem.

Passo 1:

Em primeiro lugar, mude o posicionamento da imagem dentro do container:

div {
    height: 800px;
    position: relative;
    background: red;
}

img {
    width: 80%;
    position: absolute;
}

Passo 2

Agora defina as propriedades top e left em 50% cada uma da seguinte forma:

img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
}

Passo 3

Então, por último defina a propriedade transform adicionando -50% aos eixos X e Y, para trazer a imagem de volta ao centro que foi empurrada parcialmente para fora do container no passo 2:

img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Pronto! Sua imagem está centralizada!

Vídeo Aula Completa

Confira essa aula mostrando o passo a passo de como centralizar imagem no CSS.

Veja também: Lista completa com os melhores cursos gratuitos com certificado.

Conclusão

Chegamos ao fim, e espero que nossa explicação sobre CSS e o passo a passo para centralizar uma imagem, ajude você durante seus desenvolvimentos.

Clique no botão abaixo para acessar mais de 1400 cursos completos e com certificado válido.

ACESSAR CURSOS COM CERTIFICADO

Invista em você e conquiste uma excelente carreira profissional na área da tecnologia.

Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.

Eu vou ficando por aqui…

Até a próxima e um forte abraço!!

Tags: centralizar imagem css | css para iniciante | css tutorial