Foros Programación Cliente

Posicionamiento div CSS (+JS?).

5 5 Respuestas Jueves 21 de julio, 2011
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.
Registrado desde 28/09/04
Número de posts: 230
  • Avatar de Mag Mag Registrado desde 25/08/05 / Número de posts: 93
    yo haría esto si no he entendido mal:

    #content {
    margin: 0 auto;
    width:1200px;
    text-align:center; (este es un hack para explorer)
    }
    Publicado hace 2 años
  • Avatar de elSuricatoRojo elSuricatoRojo Registrado desde 28/09/04 / Número de posts: 230
    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;"
    Publicado hace 2 años
  • Avatar de adriia adriia Registrado desde 29/04/10 / Número de posts: 37
    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.
    averdaguer.com
    Publicado hace 2 años
  • Avatar de elSuricatoRojo elSuricatoRojo Registrado desde 28/09/04 / Número de posts: 230
    Muchas gracias adriia
    Publicado hace 2 años
  • Avatar de Hugo Palomar Hugo Palomar Registrado desde 06/04/11 / Número de posts: 1
    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
    Publicado hace 2 años