Centralizando textos e imagens com CSS

out 8, 2009   //   by flavio   //   CSS, Dicas  //  No Comments

div.example {
border: #603 dotted;
padding: 0.5em;
margin: 1em 2em
}
p.blocktext {
margin: 1em auto;
width: 8em;
text-align: left
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
div.container {
height: 10em;
display: table-cell;
vertical-align: middle
}
div.container p {
margin: 0
}
pre { width:510px}

Linhas

Bloco

Verticalmente

Demonstrativo

Centralizar coisas

Uma tarefa comum no CSS é centar texto ou imagens. De fato, existem três tipos de centros:

Centralizar linhas de texto

O mais comum e fácil tipo de centro são as linhas de texto num parágrafo ou num cabeçalho. CSS tem a propriedade ‘alinhar- texto’ para isso:

        P { text-align: center }
        H2 { text-align: center }

torna cada linha num P ou num H2 centralizado entre as suas margens, como este:

As linhas neste parágrafo estão todas centradas entre as margens do parágrafo, graças ao valor ‘centro’ da propriedade ‘alinhar-texto’ do CSS.

Centralizar um bloco ou uma imagem

Às vezes não é o texto que precisa de ser centralizado, mas o bloco como um todo. Por outras palavras: queremos que a margens esquerda e direita sejam iguais. A maneira para fazer isso é defenir as margens para ‘auto’. Isto é normalmente usado com um bloco fixo de medidas porque se o bloco é flexível irá simplesmente ocupar todas as medidas disponíveis. Aqui está um exemplo:

    P.blocktext {

    margin-left: auto;

    margin-right: auto;

    width: 6em

}

Este bloco de texto estreito está centralizado. Repara que as linhas dentro do bloco não estão centradas (estão alinhadas à esquerda), ao contrário do exemplo anterior.

Este também é o método para Centralizar uma imagem: transforma-a num bloco com a sua própria margem a aplica-lhe as propriedades. Por exemplo:
IMG.displayed {

display: block;

margin-left: auto;

margin-right: auto }

A imagem seguinte está centrada: some random image

Centralizar verticalmente

CSS nível 2 não tem a propriedade de Centralizar coisas verticalmente. Irá provavelmente existir essa propriedade no CSS nível 3. Mas mesmo no CSS2 pode Centralizar blocos verticalmente combinando umas quantas propriedasdes. O truque é especificar que o bloco exterior está a ser formado como uma célula de uma tabela porque os conteúdos de uma célula de tabela podem ser centralizado verticalmente.

O exemplo em baixo centra um parágrafo dentro de um bloco que tem uma determinada altura. Um exemplo em separado mostra um parágrafo que está centralizado verticalmente na janela do navegador porque está dentro de um bloco que é absolutamente posicionado e tão alto como a janela.

DIV.container {

    min-height: 10em;

    display: table-cell;

    vertical-align: middle }

O parágrafo pequeno está verticalmente centralizado.

Leave a comment