Como centralizar uma DIV, Imagem ou Texto em HTML e CSS

Veja este breve tutorial de como colocar uma DIV centralizada usando pouquíssimo código em CSS. Também como centralizar tags de textos e por fim como colocar uma imagem no centro.

Home Tecnologia

Uma necessidade de quem desenvolve sites é de centralizar uma div. Há pelo menos duas razões para isso: A primeira é que qualquer site deve ser feito usando a tag DIV como case do site a fim de que se possa trabalhar melhor o alinhamento do mesmo, seja centralizado ou alinhado a esquerda ou direita. A segunda razão é que em funções dos mais diferentes tamanhos e resoluções de tela é quase unânime a ideia de que um site deve ser centralizado a fim de administrar melhor os espaços laterais que excedem a largura do site.

Neste artigo mostrarei também como centralizar outras tags de texto e uma imagem com CSS. Para isso, a primeira coisa a fazer é criar o HTML adequadamente a fim de facilitar a formatação no CSS. Veja o código abaixo:

Como centralizar uma div, imagem ou texto em HTML e CSS

Perceba que coloquei o id=”site” na div que quero centralizar. Isto é necessário, pois caso eu vier a ter outras tags divs neste HTML, apenas esta tag deve ser centralizada. Perceba ainda os textos posicionados nas tags <h1> e <p>. Por fim a imagem com a tag <img>.

Formatação

Agora vamos ao CSS. Veja o código em CSS para centralizar a div e as tags de texto:

Como centralizar uma div, imagem ou texto em HTML e CSS

O resultado pode ser visto aqui.

Explicando:

  • Linha 2: Crio a regra para formatar a div cujo id é site
  • Linha 3: Largura da div setado em 800px
  • Linha 4: Margem superior e inferior 0px, direita e esquerda “auto”. Aqui está o segredo, pois ao determinar que as margens direita e esquerda serão automáticas, eu transfiro para o navegador definir quais serão os valores de cada um. Em um monitor de 1000px, por exemplo, ele fará o seguinte cálculo: 1000-800=200, ou seja, sobrou 200px, desta forma ele pega a sobra e coloca 50% de cada lado.
  • Linha 5: Cor de fundo da div.
  • Linha 7: Crio a regra para formatar o h1 e o p
  • Linha 8: centralizo o conteúdo das duas tags.

Conforme indicado na imagem, a regra da linha 14 não funcionará, pois a tag img não pode ser centralizada, pois a mesma é uma tag inline. Há dois tipos de tags em HTML: De bloco e inline.

As tags de bloco são aquelas que ocupam o espaço de uma linha interira. A maioria das tags HTML são de bloco. Já as tags inline são aquelas que podem ser usadas dentro dos blocos, como as tags: <a> para link, <strong> para negrito, <em> para enfatizado, <img> para imagens, entre outras.

Como Centralizar uma imagem?

A solução para centralizar a imagem é colocá-la no HTML dentro de uma tag de bloco e centralizar no CSS o conteúdo desta tag. Como já temos as tags <h1> e <p> com essa característica, basta colocar a imagem dentro da tag <p>, como no exemplo abaixo:

Como Centralizar uma imagem.

O resultado pode ser visto aqui.

Gostou? Compartilhe



 

Leia também:



© 2008-2018 | Professor Digital | Política de Privacidade | Em Jesus Cristo eu confio