Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: ¿Existe alguna manera de centrar verticalmente una DIV?

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    12

    ¿Existe alguna manera de centrar verticalmente una DIV?

    Estimados, sigo con mi aprendizaje sobre DIVS, pero aún no le encuentro la vuelta a algunas cosas.

    Quisiera conseguir centrar verticalmente una DIV, sea cual fuere la altura dada a la ventana del navegador.

    Obviamente si por su contenido la altura de la DIV fuese mayor que la altura del área visible de página estaría bueno conseguir que el contenido no se "meta debajo" del área de controles del navegador, pero si esto no se puede hacer, con centrar el contenido verticalmente me conformo.

    ¿Cómo puede hacerse esto?

    De antemano muchas gracias!
    GusSiglo21

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Hola gus, no te entiendo muy bien ¿quieres que el div siempre sea visible en la página aunque hagas scroll? Si es así deberás usar javascript para ello.

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

  3. #3
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    12
    Hola WebFreelance
    Trataré de explicarlo mejor con la figura adjunta

    div.jpg

    1)
    Como primera medida, lo que me gustaría saber cómo se hace es que las distancias verticales A y B
    se mantengan iguales independientemente de la altura que se le de a la ventana del explorador de internet.
    A eso le llamo "centrado vertical" o alineación vertical", al igual que lo que se hace con el texto dentro de las celdas de una tabla donde puedes hacer que el texto se pegue arriba, abajo, o que fluya exactamente alrededor del medio de la celda.
    Es eso mismo pero que la DIV quede siempre alineada verticalmente al centro del área útil de página de un explorador de internet.

    2)
    Luego, como segunda opción es: si el explorador de internet se redimensionase con muy poca altura
    la altura de la DIV podría llegar a sobrepasar la altura del área de página. O sea, ser más alta que el área de página visible.
    Entonces si fuese posible, sería bueno lograr que la DIV no se "esconda" bajo los bordes superior e inferior del área de página visible.
    Pero esta segunda parte suena más complicada.

    Con saber cómo hacer la 1) ya estaría bueno y suficiente para mi.

    ¿Ahora se entendió mejor?
    Muchas gracias!
    GusSiglo21
    Última edición por gussiglo21; 10/07/2012 a las 17:07

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Web-Freelance
    Fecha de Ingreso
    15 sep, 11
    Ubicación
    España
    Mensajes
    603
    Poder de Reputación
    16
    Bueno Gus, pues te he preparado algo en Javascript. Con este código que te voy a pasar ahora (ya que ignoro otra forma de hacerlo que no sea javascript), el div central se queda totalmente centrado verticalmente independientemente del tamaño de este, siempre que no supere el alto de la ventana claro:

    Código HTML:
    <html>
    <head>
    <title>Pruebas de centrado vertical</title>
    <script type="text/javascript">
    function centrarDiv(){
    	altoGlobal = document.getElementById('global').clientHeight;
    	altoCentral = document.getElementById('centrado_vertical').clientHeight;
    	calcula = altoGlobal - altoCentral;
    	calcula2 = calcula / 2;
    	document.getElementById('centrado_vertical').style.marginTop = calcula2+'px';
    	
    }
    </script>
    
    <style type="text/css">
    #global {
    	height: 100%;
    	width: 100%;
    	position:absolute;
    }
    #centrado_vertical {
    	height: auto;
    	width: 950px;
    	margin: auto auto auto auto;;
    	border: 1px solid #06F;
    }
    html,body{
    	margin:0px;
    	height:100%;
    }
    </style>
    </head>
    
    <body onload="javascript:centrarDiv();">
    <div id="global">
      <div id="centrado_vertical">
        <p>Contenido del DIV centrado</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
    </body>
    </html>
    Es importante que los estilos no los cambies, solo el width y el border del #centrado_vertical que será a tu gusto.

    Pruébalo, funciona en todos los navegadores. Ahora bien, habría que currarse algo para que, al cambiar de tamaño la ventana, vuelva a redimensionar, ya que si pruebas ahora, verás que al cambiar el tamaño de la ventana del navegador, el div no se vuelve a centrar hasta que recargas la página. No creo que sea tarea dificil. A ver que tal.

    Saludos!
    Agradece si te ayudan, que desagradecidos ya sobran.

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    05 jul, 12
    Mensajes
    94
    Poder de Reputación
    12
    Recién veo tu mensaje Web-Freelance

    Probaré ese código apenas pueda

    Muchas gracias!

    GusSiglo21

Temas Similares

  1. Alinear los menus verticalmente
    Por kiya en el foro Foro General
    Respuestas: 3
    Último Mensaje: 14/07/2010, 14:35
  2. fondo repetido verticalmente
    Por Mikel L en el foro Foro General
    Respuestas: 3
    Último Mensaje: 03/10/2007, 14:24

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •