1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Centrar DIV (V e H)

Discussão em 'Web Development' iniciada por OldMan, 21 de Fevereiro de 2009. (Respostas: 33; Visualizações: 3599)

  1. OldMan

    OldMan Power Member

    Boas!
    Já estou farto de procurar e não encontro nenhuma solução minimamente decente...

    Já estive aqui e nenhuma dessas resulta a 100%.

    O meu objectivo é centrar uma div tanto na horizontal como na vertical, mas só consigo uma ou outra (separadamente). Aquele método das margens negativas não é solução e nunca devia ter sido inventado (digo eu).

    Neste momento tenho isto (centrada na horizontal):

    Código:
    			html, body {
    				height: 100%;
    				margin: 0px;
    				padding; 0px;
    			}
    			#contentdiv {
    				width: 100%;
    				height: 100%;
    				background-color: #006600;
    			}
    			#centerdiv {
    				height: 525px;
    				width: 240px;
    				margin: 0 auto;
    				background-color: #ff0000;
    			}
    
    Check

    Como é que a partir daqui consigo centrar verticalmente?

    Obrigado
     
  2. unsilent

    unsilent Power Member

    Boas, isto não é a solução ideal-gostava de saber qual é, mas sinceramente acho que não deve existir:wscared:- mas funciona no Ie6 e FF:
    Código:
    <?xml version="1.0" encoding="UTF-8"?> 
    <!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" xml:lang="en"> 
        <head> 
            <title>centrado na horizontal</title> 
    <style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding; 0px;
    }
    #contentdiv {
        height: 100%;
        background-color: #006600;
    }
    
    #centerdiv {
        height: 525px;
        width: 240px;
        background-color: #ff0000;
    }
    </style>
    <script language="javascript">
        function margin(){
        co_h=document.getElementById("contentdiv").clientHeight;
        ce_h=document.getElementById("centerdiv").clientHeight;
        co_w=document.getElementById("contentdiv").clientWidth;
        ce_w=document.getElementById("centerdiv").clientWidth;
        t=(co_h-ce_h)/2;
        l=(co_w-ce_w)/2;
        e=document.getElementById("contentdiv");
        e.style.paddingTop= t+'px';
        e.style.paddingLeft= l+'px';
        }
    </script>
        </head> 
        <body onload="margin()" onresize="margin()">
        <div id="contentdiv">
            <div id="centerdiv">se diminuirem o tamanho da janela do browser na vertical a certa altura vão deixar de conseguir ver este texto e nem sequer vão ter acesso a ele pelo scroll.
    
            </div>
    
        </div>
        </body> 
    </html>
    
    EDIT: esquece la isto, vou tentar adicionar um onResize...
    edit2: já funciona
     
    Última edição: 21 de Fevereiro de 2009
  3. chantas

    chantas Power Member

    A mim aparece-me tudo bem centrado...tanto no firefox como no IE mesmo qnd reduzo o tamanho da janela..
     
  4. OldMan

    OldMan Power Member

    Obrigado, mas também me parece que não é solução ideal.

    Reduz drasticamente de maneira a que o rectângulo vermelho não caiba no browser.




    Aquele pessoal que tem portáteis com ecrãs menores de 10'' não conseguem ver o site completo com esse método das margens...
     
  5. OldMan

    OldMan Power Member

    Parece que consegui resolver o problema razoavelmente. Agora o que me "preocupa" é uma questão de compatibilidade.

    FFox 3.0 @ mac: check!
    Safari 4 @ mac: check!
    Camino 1.5.4 @ mac: check!

    FFox 2.0 @ win: check!
    FFox 3.0 @ win: check!
    IE 7 @ win: check!
    IE 6 @ win: FAIL!

    Ainda há muita gente que use o IE6?
     
  6. unsilent

    unsilent Power Member

    Podes tentar:
    html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    }
    #contentdiv {
    height: 100%;
    background-color: #006600;
    overflow: visible;
    padding-top:5%;
    margin:auto;
    }

    #centerdiv {
    height: 80%;
    width: 240px;
    background-color: #ff0000;
    }

    A questão é que esse 10'' têm resolução de 1280x600 se descontares o browser deve ficar em +/- 480 de altura. A tua div tem 525px ou a defines em %(como em cima) ou com um valor inferior que permita que seja mostrada na íntegra mesmo em resoluções + pequenas.
    Não que seja a melhor, mas acho que só com css esta solução é a menos má.

    Se encontrares outra solução diz qq coisa.



    Epá não tinha visto o teu último post, já agora diz como é que fizeste.
    O Ie6 eu só uso por causa dos animais que o usam...
    http://www.w3schools.com/browsers/browsers_stats.asp
     
    Última edição: 22 de Fevereiro de 2009
  7. OldMan

    OldMan Power Member

    aqui.

    Na verdade não está centrada verticalmente, apenas dei um padding e parece-me melhor assim. O resultado no site ficou melhor que nesse exemplo.
     
  8. K0mA

    K0mA Power Member

    Pesquisa aqui no forum já respondi a essa questão várias vezes.
     
  9. OldMan

    OldMan Power Member

    Já tinha visto alguns posts teus antes de fazer este tópico, mas tenho ideia que todos eles usavam o método das margens negativas para centrar verticalmente. Isso é uma má solução.

    [​IMG]

    Reparem na posição do scroll e o texto que [não] aparece. Link
     
  10. K0mA

    K0mA Power Member

    Centrar, Centro, Horizontal, Vertical, Div, HTML

    CENTRAR UM DIV HORIZONTALMENTE:

    Código:
    [B]CSS:[/B]
    <style type="text/css">
    #divcentrado {
          margin: 0 auto;
          width:500px;
    }
    </style>
    
    [B]HTML[/B]:
    
    <div id="divcentrado">
         Este div está centrado na horizontal
    </div>
    
    


    CENTRAR UM DIV VERTICALMENTE:


    Código:
    CSS:
    
    <style type="text/css">
    #centrado_v{
        height:200px;
        width:500px;
        position:absolute;
        top:50%; 
        left:50%;
        margin-top:-100px; /* metade de height:200px; */
        margin-left:-250px;  /*metade de width:500px */
        background: green;
    }
    </style>
    
    [B]HTML[/B]:
    
    <div id="centrado_v">Este div também está centrado na vertical</div>
    
    O resultado podes ver aqui.

    fonte http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div/


    PS. Se não consegues visualizar o div centrado, testa com outros navegadores, pois no meu computador não há problema nenhum.

    CENTRAR UM DIV VERTICALMENTE (OUTRO MODO)

    Código:
    
    [B]CSS:
    
    
    [/B]<style type="text/css">
    #centrado_v{
          min-height: 200px;
          display: table-cell;
          vertical-align: middle;
          background: green;
    }
    </style>
    
    [B]HTML:[/B]
    <div id="centrado_v">
          Este div também está centrado na vertical !
    </div>
    

    fonte: http://www.w3.org/Style/Examples/007/center#vertical
     
    Última edição: 23 de Julho de 2009
  11. OldMan

    OldMan Power Member

    O problema não é centrar a div, o problema é centrar DEVIDAMENTE.
    Como disse no post acima essa solução das margens negativas não é solução!

    Ela aparece centrada, mas se eu encolher o tamanho da janela do browser deixo de poder aceder ao conteúdo. Isso acontecia-me porque eu tenho uma div na vertical (mais alta do que larga) e deixava de conseguir aceder ao conteúdo lá de cima, seja no Safari ou FireFox.
     
  12. Jammin @

    Jammin @ Power Member

    Trabalha com percentagens. É mais facil
     
  13. OldMan

    OldMan Power Member

    Nas dimensões da div? Não posso... Tenho uma imagem no background que não estica :D
     
  14. Jammin @

    Jammin @ Power Member

    Pois isso assim já é diferente ;D
     
  15. paulojreis

    paulojreis Power Member

    Havia um método meio manhoso, com tabelas, mas também está longe de ser o método mais correcto...

    Consistia em ter uma tabela só com uma célula, a ocupar 100% de altura e largura. Dentro dessa célula, com os alinhamentos vertical e horizontal definidos para o centro, o conteúdo ficava todo centrado.
     
  16. OldMan

    OldMan Power Member

    Yap, com tabelas é bem mais fácil e não dá dores de cabeça.
     
  17. paulojreis

    paulojreis Power Member

    Neste caso, não me choca a utilização menos "religiosa" das tabelas. O chato é q basta utilizares um DTD minimamente actual e a solução deixa de funcionar...
     
  18. OldMan

    OldMan Power Member

    Eu usei esse método das tabelas noutra página que só vai ser vista por quem usar o IE6 ou inferior.
    Para não me preocupar muito com isso meti um texto dentro da tabela a dizer para actualizar o browser.
     
  19. shello

    shello Moderador
    Staff Member

  20. OldMan

    OldMan Power Member

    Inicialmente usei esse método que fala no primeiro site para centrar verticalmente mas por outro motivo que já não me lembro agora não podia ter o display como table-cell...
    Posso testar isso outra vez amanha e se afinal eu é que estava enganado venho cá postar de novo.

    Obrigado
     

Partilhar esta Página