web development

Centralizar coisas

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

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

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:

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 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 }

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 }