Um elemento "bloco" é um elemento que ocupa a largura total disponível na janela, e tem uma quebra de linha antes e depois dele. Alguns exemplos de elementos de bloco são <h1>, <p> e <div>. Já vimos, em artigos anteriores, como alinhar textos. Agora vamos ver como alinhar os elementos bloco, melhorando o layout das páginas.

Os elementos bloco podem ser alinhados usando a configuração de margens esquerda e direita. Basta configurar para "auto". Definindo as margens esquerda e direita para "auto" vamos dividir a margem disponível de forma igual. O resultado é um elemento centrado. Veja um exemplo:


Um outro método é alinhar os elementos usando posicionamento absoluto. Isto também já foi visto em artigos anteriores. Veja um exemplo:


Um terceiro método, e bem óbvio, é usar a propriedade vista na página anterior... o "float". Veja um exemplo bem auto-explicativo:


Aqui, cabe um pequeno aviso: tais configurações nem sempre são bem compreendidas por todos os navegadores web. Portanto, é extremamente aconselhável testar suas configurações num bom número de navegadores. Afinal, hoje temos o prazer da liberdade com vários navegadores. No entanto, o número não é tão grande a ponto de impossibilitar um pequeno teste de compatibilidade.

Vamos em frente. Muita coisa ainda pode ser vista em CSS. No próximo artigo veremos exemplos práticos: como construir uma barra de navegação para páginas web, como construir uma galeria de imagens, entre alguns outros exemplos bem úteis.

Até o próximo artigo!