Centralizar Div Na Tela Dinamicamente

BartS · Junho 5, 2006

Eu quero que quando o usuário clique no link o div vá para o centro da janela, e tem que funcionar tanto com a janela maximizada como não maximizada.

Esse exemplo não tá funcionando mas dá pra entender o que eu quero: EXEMPLO

Tem como fazer isso? Tem que ser dinâmico porque as coordenadas do centro da página podem variar dependendo de onde o cliente "está" dentro da página (por conta da barra de rolagem).

valeu galera!!

fercosmig · Junho 5, 2006

olha o código para centralizar o pop-up, é só adaptar

http://scriptbrasil.com.br/forum/index.php...indpost&p=36851

BartS · Junho 6, 2006

Não.... não tem nada a ver. Estou trabalhando com DIVs e as propriedades são outras

Diego_Bittencourt · Junho 6, 2006

Você quer só posicionar no meio da tela, independente de resoluções?

Não entendi direito. (a parte do clicar :P)

Vê se é isso:

<div style="width: 70%; padding: 5px; margin: 0 auto; background: #f6f6f6; border: 1px solid #ccc">
<p>Conteúdo aqui</p>
</div>

"by eu" XD (aprendi a algum tempo posicionar div independente de resolução e me ajudou bastante)

Ps: Fiz até uma div bonita né... :D (graças aos paddings que ficou bonita)

BartS · Junho 7, 2006

Cara.... imagina um DIV em uma posição qualquer da tela (no canto superior esquerdo por exempolo). Aí você põe um link lá no rodapé que quando o cara clica o div vai pro centro da tela.

Sacou?

fercosmig · Junho 7, 2006

opa, uma ideia!

não to podendo testar aqui... não sei se funciona, mas á ideia é por aí!

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function centraliza(w,h){
    x = parseInt((screen.width - w)/2);
    y = parseInt((screen.height - h)/2);
   //alert(x + '\n' + y);
    document.getElementById('a').style.top = x;
    document.getElementById('a').style.left = y;
}
//-->
</script>
</head>
<body>
<div id="a" style="width:100px; height:100px; background: #99ccff; border:#0066cc 1px Solid;"></div>
<br><br><br><br><br>
<a href="java script:" onclick="centraliza(100,100);" onmouseover="style.cursor='pointer';">centraliza</a>
</body>
</html>

qqer coisa posta aí!

abraços

Diego_Bittencourt · Junho 9, 2006

Nossa nada a ver o que eu falei :P

Mas eu acho que divs absolutas (nesse caso, e usando coordenadas por %) seriam melhores com um pouco de JS. Tipo, ao clicar trocar de classe CSS. (mas não sei nada de JS :()

hehe Falow

Paulo Alonso · Julho 27, 2011

opa, uma ideia!

não to podendo testar aqui... não sei se funciona, mas á ideia é por aí!

<html>
<head>
<title>Untitled</title>
&lt;script language="JavaScript" type="text/javascript">
<!--
function centraliza(w,h){
    x = parseInt((screen.width - w)/2);
    y = parseInt((screen.height - h)/2);
   //alert(x + '\n' + y);
    document.getElementById('a').style.top = x;
    document.getElementById('a').style.left = y;
}
//-->
</script>
</head>
<body>
<div id="a" style="width:100px; height:100px; background: #99ccff; border:#0066cc 1px Solid;"></div>
<br><br><br><br><br>
<a href="java script:" onclick="centraliza(100,100);" onmouseover="style.cursor='pointer';">centraliza</a>
</body>
</html>

qqer coisa posta aí!

abraços

Perfeito. Apenas sugiro que ao invés de usar screen.width e screen.height use document.documentElements.clientWidth e document.documentElements.clientHeight, já que screen.* pega a resolução de tela e não a resolução da janela do navegador. Caso não funcione dentro da função tente passar como parâmetro ao chamar a função.

Editado Julho 27, 2011 por Paulo Alonso

mafedjas · Fevereiro 13, 2012

Pessoal aqui como centrar mesmo quando mudamos o tamanho da janela. Está feito em Jquery

http://lebcorreia.com/alinhar-div-horizontal-e-vertical/

Entrar

Centralizar Div Na Tela Dinamicamente

Pergunta

BartS

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

fercosmig

Link para o comentário

Compartilhar em outros sites

BartS

Link para o comentário

Compartilhar em outros sites

Diego_Bittencourt

Link para o comentário

Compartilhar em outros sites

BartS

Link para o comentário

Compartilhar em outros sites

fercosmig

Link para o comentário

Compartilhar em outros sites

Diego_Bittencourt

Link para o comentário

Compartilhar em outros sites

Paulo Alonso

Link para o comentário

Compartilhar em outros sites

mafedjas

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades