Posicionamiento div CSS (+JS?).

el 21.07.2011 a las 11:03  por elSuricatoRojo· 5 comentarios

Aqui un flashero voluntarioso pero que está pez en HTML+CSS / JS tiene una duda (posiblemente tonta)

Necesito posicionar un div de tamaño fijo de 1200x800 dentro del navegador. La lógica del posicionamineto es:

Si el ancho del navegador es mayor que 1200 centramos el div horizontalmente. Si es menor, posicionamos el div en x=0.
Si el alto del navegador es mayor que 800 centramos el div verticalmente. Si es menor, posicionamos el div en y=0.

Alguien puede aportar un poco de luz a mi penumbra?

muchas gracias de antemano.

  • yo haría esto si no he entendido mal:

    #content {
    margin: 0 auto;
    width:1200px;
    text-align:center; (este es un hack para explorer)
    }

  • Gracias Mag,

    Con ello consigo posicionarlo horizontalmente casi según la lógica. El casi es por unos px de margen entre el div y el borde izq.

    Pero creo que no sirve para el posicionamiento vertical.... incluso poniendo, un a priori esperanzador, "height:800x;"

  • Aquí tienes un ejemplo para alinear verticalmente: http://www.forosdelweb.com/f53/centrar-div-verticalmente-285717/

    Aunque no se me ocurre la manera de que cuando la capa que está alineada al centro llegue a la parte superior, se quede y no siga subiendo.

  • Muchas gracias adriia

  • Hola...

    El centrado vertical en css no existe para elementos block, inline, inline block, etc... para centrar algo verticalmente debes declar display:table-cell y vertical-align:middle al contenedor (un div contenedor vacio, comunmente el wrapper) y funcionará.

    El otro problema que te encontrarás es que para que el wrapper tenga el alto del window, deberas declarar height:100%, al html y al body.

    de memoria sería algo asi:

    HTML:

    <div class="wrapper">
    <div class="content"></div>
    </div>

    CSS:
    html, body, .wrapper: {height:100%}
    .wrapper {display:table-cell; vertical-align:middle}

    si quieres tambien podrías usar jquery... para detectar el alto del window, el del contenido, dividir la diferencia por dos y aplicarsela como margen superior al contendio