234_Centralizando_conteudo_em_divs_com_css

Prévia do material em texto

Tutorial: Centralizando Conteúdo em Divs com CSS
CSS é a melhor maneira de controlar o layout de páginas Web, mas para certas tarefas é preciso conhecer alguns truques da tecnologia.
a. Primeiro você deve especificar a largura da div que você quer centralizar, e ela deve ser menor que a largura da tela, ou ela se estenderá por toda a página. A div deve ser a mais externa em seu layout. Neste exemplo, o nome da div é #container. Clique com o botão da direita no nome da div no painel de tarefas Manage Styles e escolha Modify Style (se você ainda não aplicaou nenhum estilo à div, escolha New Style). 
b. No diálogo Modify Style ou New Style, selecione a categoria Position, e entre com uma largura em Width. Neste exemplo, vamos usar 80 pixels. 
c. Agora vem o truque. Para centralizar a div, marque as margens direita e esquerda como automáticas. O efeito disso é que o browser vai colocar um espaço do mesmo tamanho em cada lado da div, centralizando-a na página. Para fazer isso, escolha a categoria Box no diálogo Modify Style ou New Style e marque as margens left e right como auto. 
d. Quando você salvar o estilo e ele for aplicado à div, ela será centralizada na página, bem como todo o seu conteúdo, como na imagem abaixo. 
Centralizar a página faz com que o seu design preencha a tela de maneira equilibrada, em qualquer resolução.