Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Venturi

Centralizando div

Por , em Desenvolvimento frontend

Recommended Posts

Venturi    0

Venturi
Postado

Galera....

 

Esse é meu primeiro POST aki no fórum.... eu vasculhei o fórum e não achei um esquema legau e dinâmico pra alinhamento de DIV EXATAMENTE no centro da tela (vertical e horizontal) sem outros artificios adicionais.

 

Se alguém quiser... e se for interessante... tá ai o codigo... é só copiá e colá!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Com esse esquema ai você pode mudá o tamanho da DIV e sempre ela ficará alinhada no centro da tela.

Esse ai é um exemplo simples... cada um que use de acordo com sua utilidade!!! :)

 

Um detalhe :unsure: só fiz o teste no IE pq é a unica coisa que tenho aki no trampo... se alguém poder testar em outros browsers e postar ai eu agradeço!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

<script>function centro() { var oParent=oDiv.parentElement; oDiv.style.left=oParent.offsetWidth/2 - oDiv.offsetWidth/2; oDiv.style.top=oParent.offsetHeight/2 - oDiv.offsetHeight/2; }</script><body onLoad="centro();"><div id="oDiv" style="position:absolute;width:100px;height:100px;background-color:#000000;"></div></body>

Espero ter ajudado a alguém..... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Falow's ae!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

ZEROZ    0

ZEROZ
Postado

Aqui funcionou porem...se eu usar da seguinte forma da erro:

<head><title>teste</title><script>function centro() { var oParent=prepage.parentElement;  prepage.style.left=oParent.offsetWidth/2 - prepage.offsetWidth/2;  prepage.style.top=oParent.offsetHeight/2 - prepage.offsetHeight/2; }</script><script LANGUAGE="JavaScript"><!-- Beginfunction clearPreloadPage() { //DOMif (document.getElementById){document.getElementById('prepage').style.visibility='hidden';}else{if (document.layers){ //NS4document.prepage.visibility = 'hidden';}else { //IE4document.all.prepage.style.visibility = 'hidden';}}}// End --></SCRIPT></head><body onLoad="clearPreloadPage(); __loadEsconde(); centro()"><div id="prepage" style="position:absolute; background-color:white; layer-background-color:white; height:566px; width:765px;"> </div></body>

esse javascript que eu inseri funciona como um "pre-loader" para ocultar a pagina enquanto é carregada...quando uso dessa forma da erro e não centraliza a DIV agora... o erro seria o "id" do DIV que está sendo compartilhado por dois scripts? ou seria outro erro? :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Existem modos de fazer isso somente pelo CSS...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Existem modos de fazer isso somente pelo CSS...

 

[]'s

Como nosso amigo #INSIDE# falou, somente com CSS você faz isso e q funciona em qq browser sem problema nenhum!!! Vai aí o código...

#div_centralizada {	position: absolute;	top: 50%;	left: 50%;	height: 200px;	width: 300px;	margin-top: -100px;	margin-left: -150px;}
Se isso for de interesse a alguém...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Pederia me dar alguns exemplos?

 

Agradeço ^^

Olha o exemplo acima... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Além de centralizar no sentido horizontal, centraliza na vertical...

 

Mas eu tenho uma div com width de 746px... E naum tá ficando centralizado... Como faço?

 

Vms pegar o exemplo de 746px... Para fazer centralizar esta medida, você tem q especificá-la no width e depois, tem q pegar a metade desse valor (no caso, 746/2 = 373).

 

Agora, esse valor de 373px você deve colocar na propriedade margin-left, não esquecendo de colocar esse valor negativo!!!

 

Ok? Espero q ajude... T+!

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Paulo de Tarso F. M. optima dica esta :D, Obrigado

 

#div_centralizada {

position: absolute;

top: 50%;

left: 50%;

height: 200px;

width: 300px;

margin-top: -100px;

margin-left: -150px;

}

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado 

marginLeft = -W/2marginTop = -H/2
Pequena fórumula para ajudar na solução do problema xD

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo #INSIDE# onde coloco essa dica? Isso é CSS? Basta colocar no meu documento CSS?

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Olá,

 

Amigo #INSIDE# onde coloco essa dica? Isso é CSS? Basta colocar no meu documento CSS?

 

Cumps [*]

Bom, eu acho q ele quis dizer q, para saber qual medida colocar, é só pegar o valor de width e dividir por 2, colocando o resultado negativo, para o caso do margin-left... Já no caso da altura, pegue o height e divida por 2, colocando o resultado também negativo para margin-top...

 

É isso msm, neh #INSIDE#? Ou isso seria algum código JS? http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo Paulo de Tarso F. M. eu também fiquei um pouco :wacko:. Só não consigo perceber uma coisa, o que vai fazer o valor negativo? Não consigo perceber como o browser funciona com esse valor negativo..

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Isso é apenas um resumo do cálculo que tem que fazer, naum eh codigo nem css, nem javascript nem nada...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

#INSIDE# é que ficou muito resumido mesmo :P. Valeu!!

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Valeu a dica amigo Paulo ;)

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Essa técnica do site do Maujor não funcionou no meu FF 2. A resolução do meu monitor é 1280 x 1024. Creio que a melhor maneira ainda seja do colocar uma camada contenedora (DIV) e centralizar tudo no BODY - essa funciona em qq lugar (e ainda permite a você ter flexibilidade no conteúdo). :DAbraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Vamos lá:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titulo do site</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">

{SEU SITE ENTRA AQUI}

</div>
</body>
</html>

 

O arquivo default.css deverá conter obrigatoriamente:

 

* { 	padding: 0; /* esse seletor define que todos os elementos terão padding e margin igual a 0 */	margin: 0;}body {	text-align: center;	font-family: Arial, Helvetica, sans-serif; /* Aqui você define a fonte do seu site */}#contenedor {	width: 785px; /* Aqui vai ser o tamanho horizontal do seu site */	text-align: left;	margin: 0 auto;}

Acho que com isso vocês já resolvem a centralização! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Amigo Poe aquela dica resulta comigo na perfeição no meu FF 2.

 

Cumps [*]

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito