Ainda surgem dúvidas quanto a essa questão: "Como centralizo minha div com css para que dê certo em todos os navagadores??"
Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!
Bom, primeiramente vamos entender a teoria:
Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:
#geral {O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.
Aplicação:
<html>
<head>
<style>
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
</style>
<body>
<div id="geral">TESTE</div>
</body>
</html>
Fonte: Sonaweb.com.br
Excelente dica. Deu certo e me ajudou muito.
ResponderExcluirObrigada!
E como eu coloco uma borda nessa div para que todo o conteudo fique dentro da borda.
Excluirdentro do das chaves da id da div vc coloca (border: 2px solid blue)
Excluirno caso coloquei uma expressura de 2px, coloquei para ficar com cor solida o solid e atribui uma cor chamada blue que seria azul. Espero ter ajudado!
dsadsa
ResponderExcluir
ResponderExcluirO.o
oi
O.o
oi
O.o
O.o
kkk
oii
kkk
ResponderExcluir
ResponderExcluir