O que saber
- Para centralizar o texto, use o seguinte código ("[/]" denota uma quebra de linha): .center {[/] alinhamento de texto: centro; [/] }.
- Blocos centrais de conteúdo com o seguinte código ("[/]" denota uma quebra de linha): .center {[/] margin: auto; [/] largura: 80em; [/] }.
- Para centralizar uma imagem ("[/]" denota uma quebra de linha): img.center {[/] display: block; [/] margem esquerda: automático; [/] margem direita: automático; [/] }.
CSS é a melhor maneira de centralizar os elementos, mas pode ser um desafio para os web designers iniciantes porque existem muitas maneiras de fazer isso. Este artigo explica como usar CSS para centralizar texto, blocos de texto e imagens.
Centralizar texto com CSS
Você precisa conhecer apenas uma propriedade de estilo para centralizar o texto em uma página:
.Centro {
alinhamento de texto: centro;
}
Com esta linha de CSS, cada parágrafo escrito com a classe .center será centralizado horizontalmente dentro de seu elemento pai. Por exemplo, um parágrafo dentro de uma divisão (um filho dessa divisão) seria centralizado horizontalmente dentro de.
Aqui está um exemplo dessa classe aplicada no documento HTML:
Este texto está centralizado.
Ao centralizar o texto com a propriedade text-align, lembre-se de que ele será centralizado no elemento que o contém e não necessariamente na página inteira.
A legibilidade é sempre fundamental quando se trata do texto do site. Grande blocos de texto justificado ao centro pode ser difícil de ler, então use esse estilo com moderação. Os títulos e pequenos blocos de texto, como o texto do teaser de um artigo, são normalmente fáceis de ler quando centralizados; no entanto, blocos maiores de texto, como um artigo completo, seriam difíceis de consumir se totalmente justificados ao centro.
Centralizando blocos de conteúdo com CSS
Os blocos de conteúdo são criados usando o HTML.
.Centro {
margem: automático;
largura: 80em;
}
Esta abreviação CSS para a propriedade margin definiria as margens superior e inferior com um valor de 0, enquanto a esquerda e a direita usariam "auto". Esta essencialmente pega qualquer espaço disponível e divide-o igualmente entre os dois lados da janela de visualização, centralizando efetivamente o elemento a página.
Aqui é aplicado no HTML:
Todo este bloco está centrado,mas o texto dentro dele é alinhado à esquerda.
Contanto que seu bloco tenha uma largura definida, ele se centralizará dentro do elemento que o contém. O texto contido nesse bloco não será centralizado nele, mas será justificado à esquerda. Isso ocorre porque o texto é justificado à esquerda como o padrão em navegadores da web. Se você quiser que o texto também seja centralizado, poderá usar a propriedade text-align abordada anteriormente em conjunto com este método para centralizar a divisão.
Centrando imagens com CSS
Embora a maioria dos navegadores exiba imagens centralizadas usando a mesma propriedade de alinhamento de texto, isso não é recomendado pelo W3C. Portanto, sempre há uma chance de que versões futuras de navegadores optem por ignorar esse método.
Em vez de usar o alinhamento de texto para centralizar uma imagem, você deve informar ao navegador explicitamente que a imagem é um elemento de nível de bloco. Dessa forma, você pode centralizá-lo como faria com qualquer outro bloco. Aqui está o CSS para fazer isso acontecer:
img.center {
display: bloco;
margem esquerda: automático;
margem direita: automático;
}
E aqui está o HTML para a imagem a ser centralizada:
Você também pode centralizar objetos usando CSS embutido (veja abaixo), mas esta abordagem não é recomendada porque adiciona estilos visuais à sua marcação HTML. Lembre-se de que o estilo e a estrutura devem ser separados; adicionar estilos CSS ao HTML quebrará essa separação e, como tal, você deve evitá-lo sempre que possível.
Centralizar elementos verticalmente com CSS
Centralizar objetos verticalmente sempre foi um desafio em web design, mas o lançamento do Módulo de layout de caixa flexível CSS no CSS3 fornece uma maneira de fazer isso.
O alinhamento vertical funciona de forma semelhante ao alinhamento horizontal abordado acima. A propriedade CSS é alinhada verticalmente, assim:
.vcenter {
alinhamento vertical: meio;
}
Todos os navegadores modernos suporta este estilo CSS. Se você tiver problemas com navegadores mais antigos, o W3C recomenda que você centralize o texto verticalmente em um contêiner. Para fazer isso, coloque os elementos dentro de um elemento que o contém, como um dive defina uma altura mínima nele. Declare o elemento que o contém como uma célula da tabela e defina o alinhamento vertical como "meio".
Por exemplo, aqui está o CSS:
.vcenter {
altura mínima: 12em;
display: table-cell;
alinhamento vertical: meio;
}
E aqui está o HTML:
Este texto é centralizado verticalmente na caixa.
Não use o elemento HTML para centralizar imagens e texto; ele foi descontinuado e os navegadores da web modernos não oferecem mais suporte para ele. Isso, em grande parte, é uma resposta à separação clara de estrutura e estilo do HTML5: o HTML cria a estrutura e o CSS dita o estilo. Como a centralização é uma característica visual de um elemento (sua aparência, e não o que é), esse estilo é tratado com CSS, não HTML. Em vez disso, use CSS para que suas páginas sejam exibidas corretamente e em conformidade com os padrões modernos.
Centralização vertical e versões anteriores do Internet Explorer
Você pode forçar o Internet Explorer (IE) a centralizar e usar comentários condicionais para que apenas o IE veja os estilos, mas eles são um pouco prolixos e desagradáveis. A decisão da Microsoft em 2015 de abandonar o suporte para versões mais antigas do IE, no entanto, isso deixará de ser um problema quando o IE deixar de ser usado.