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.

Mag

Mag el 21.07.2011 a las 11:14

yo haría esto si no he entendido mal:

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

elSuricatoRojo

elSuricatoRojo el 21.07.2011 a las 11:33

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;"

adriia

adriia el 22.07.2011 a las 12:34

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.

elSuricatoRojo
Hugo Palomar

Hugo Palomar el 25.07.2011 a las 19:24

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

Entra o regístrate para comentar