Foros del Web » Creando para Internet » CSS »

Centrado vertical.

Estas en el tema de Centrado vertical. en el foro de CSS en Foros del Web. RESUELTO: Ejemplo para gente que le interesa: http://www.csslab.cl/2007/01/12/cent...tical-con-css/...
  #1 (permalink)  
Antiguo 27/01/2007, 19:53
 
Fecha de Ingreso: abril-2006
Mensajes: 119
Antigüedad: 11 años, 8 meses
Puntos: 0
Centrado vertical.

RESUELTO:

Ejemplo para gente que le interesa:

http://www.csslab.cl/2007/01/12/cent...tical-con-css/

Última edición por maurozone; 27/01/2007 a las 20:53
  #2 (permalink)  
Antiguo 27/01/2007, 20:06
 
Fecha de Ingreso: enero-2007
Mensajes: 27
Antigüedad: 10 años, 10 meses
Puntos: 1
Re: Centrado vertical.

Una forma fácil con CSS:

Código:
.centrado {
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    position: absolute;
}
Fijate que tanto "margin-left" como "margin-top" son la mitad del ancho y alto respectivamente.

Opción agregada:
Otra forma de hacerlo es la siguiente:

Código:
<style type="text/css">
  /* Just some nice colors */
  body {background: #363; color: #FF0; font-size: large;
    text-shadow: black 0.2em 0.2em 0.2em}

  /* Vertical centering: make div as large as viewport and use table layout */
  div.container {top: 0; left: 0; width: 100%; height: 100%;
    position: fixed; display: table}
  p {display: table-cell; vertical-align: middle}

  /* Also center the lines in the paragraph */
  p {text-align: center}
</style>

<div class=container>
  <p>This is vertically &amp; horizontally centered.
</div>
Espero que lo entiendas, es un ejemplo sacado de la W3C.

Última edición por Syncime; 27/01/2007 a las 20:11 Razón: Agrego otra opción
  #3 (permalink)  
Antiguo 27/01/2007, 20:28
 
Fecha de Ingreso: abril-2006
Mensajes: 119
Antigüedad: 11 años, 8 meses
Puntos: 0
Re: Centrado vertical.

OK. Syncime.

Ahora, el ejemplo de abajo no lo centra en IE ni Firefox.

Y el primer ejemplo, no puedo usarlo, ya que el div no tiene height
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:09.