Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

Centrar coisas

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

• Centrar linhas de texto
• Centrar um bloco ou uma imagem
• Centrar um bloco ou uma imagem verticalmente

Centrar 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 centrado entre as suas margens, como este:

Centrar um bloco ou uma imagem

Às vezes não é o texto que precisa de ser centrado, 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

}

...

<P class="blocktext">This rather...

Este também é o método para centrar 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 }

...

<IMG class="displayed" src="..." alt="...">

Centrar verticalmente

CSS nível 2 não tem a propriedade de centrar coisas verticalmente. Irá provavelmente existir essa propriedade no CSS nível 3. Mas mesmo no CSS2 pode centrar 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 centrado 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á centrado 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 }

...

<DIV class="container">

  <P>This small paragraph...


</DIV>