Assina meu Feed ai!
Google
 


16 agosto 2007

Centralização correta com CSS

Vou postar aqui algumas coisa que já me ajudaram bastante. São dicas de CSS universais que funcionam em qualquer browser, todas seguem o padrão w3c, com exceção da transparência. A primeira é a Centralização.

Centralizando elementos:

Essa é facil, basta colocar um text-align: center desse jeito
.caixa1{ text-align: center; }
Certo? Mais ou menos, a função dessa propriedade é centralizar o texto do elemento em que for aplicada classe .caixa1 no nosso exemplo, os elementos em si não são centralizados. Entenda-se por elementos as tags como div, table, td, body, form, fieldset, etc. O problema é que isso vale para os browsers que segue o padrão W3C, no senhor IE o text-align: center; centraliza tudo.

Então, a menos que a sua intenção seja centralizar o texto, não use text-align: center se você quiser que seu código funcione em todos os browsers (Firefox, Opera, Safari, etc.).
Vejamos o jeito certo:

.caixa1 {
margin-left: auto;
margin-right: auto;
}


alguns elementos div's e fieldset's ocupam toda largura disponível (width: 100%), nesse caso é necessário especificar uma largura:

.caixa1 {
margin-left: auto;
margin-right: auto;
width: 200px; /*necessário para algumas tags */
}

2 comments:

Wadsworth disse...

Muito obrigado, ajudou muito no projeto que estou iniciando, obrigado pela linguagem clara e precisa =]

Wadsworth disse...

Muito obrigado, ajudou muito no projeto que estou iniciando, obrigado pela linguagem clara e precisa =]