O que saber
- Para centralizar o texto, use o seguinte código (“[/]”denota uma quebra de linha): .Centro { [/] alinhamento de texto: centro; [/] }.
- Centralize os blocos de conteúdo com o seguinte código (“[/]”denota uma quebra de linha): .Centro { [/] margem: automático; [/] largura: 80em; [/] }.
- Para centralizar uma imagem (“[/]”denota uma quebra de linha): img.center { [/] display: bloco; [/] 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: .center {
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 desta 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. Grandes blocos de texto justificado no centro podem ser difíceis de ler, portanto, 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 de texto maiores, como um artigo completo, seriam difíceis de consumir se totalmente justificados ao centro.
Centralizando blocos de conteúdo com CSS
Blocos de conteúdo são criados usando o HTML .center {
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”. Isso basicamente pega qualquer espaço disponível e o divide igualmente entre os dois lados da janela de visualização, centralizando efetivamente o elemento na página. Aqui ele é 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;
}
class = “ql-syntax”> E aqui está o HTML para a imagem a ser centralizada:
class = “ql-syntax”> 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.
class = “ql-syntax ql-align-center”>
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 suportam 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 recipiente, como um div, e 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 preterido e os navegadores 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 descartar o suporte para versões anteriores do IE, no entanto, fará com que isso não seja um problema, pois o IE deixa de ser usado.
