Foros del Web » Creando para Internet » CSS »

¿Cómo centrar verticalmente el contenido principal?

Estas en el tema de ¿Cómo centrar verticalmente el contenido principal? en el foro de CSS en Foros del Web. Hola!! El problema que tengo es no saber cómo centrar verticalmente , con respecto a la resolución de cualquier pantalla , el contenido principal de ...
  #1 (permalink)  
Antiguo 02/05/2011, 16:22
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Pregunta ¿Cómo centrar verticalmente el contenido principal?

Hola!!

El problema que tengo es no saber cómo centrar verticalmente, con respecto a la resolución de cualquier pantalla, el contenido principal de un sitio web (el "main frame") que mide 980 x 550.

Actualmente lo hago con JavaScript, pero ésta solución no me gusta, porque en lo que ocurre el "onload" pasan algunos segundos en que el contenido no está centrado verticalmente.

El sitio, por si lo quieren ver, es: Circus Divas (que es solo para mayores de 16 años, no es pornográfico pero muestra imágenes "extrañas").

Muchas Gracias.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #2 (permalink)  
Antiguo 02/05/2011, 16:39
Avatar de Hugo_Euan  
Fecha de Ingreso: abril-2011
Ubicación: Mérida, Yucatán, México
Mensajes: 193
Antigüedad: 6 años, 7 meses
Puntos: 71
Respuesta: ¿Cómo centrar verticalmente el contenido principal?

Bueno, si tu sabes el tamaño exacto del contenedor lo que puedes hacer es ponerle posiciones absolutas al contenido, por ejemplo
Código HTML:
Ver original
  1. <div id="Container">
  2.    <div id="Content">Esto es meramente un ejemplo</div>
  3. </div>

y tu CSS quedaría de la siguiente manera
Código CSS:
Ver original
  1. #Container{position:relative; width:980; height:550;}
  2. #Content{position:absolute; left:(la posicion que quieras en X); top:la posicion en Y}

Espero que te ayude, saludos y EXITO !!!!
__________________
Se acepta Karma (:

Si Dios con nosotros, quien contra nosotros !!
  #3 (permalink)  
Antiguo 02/05/2011, 17:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: ¿Cómo centrar verticalmente el contenido principal?

con este código consigues centrar el contenido tanto horizontal como verticalmente, sin importar la resolución de la pantalla
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}


#contenedor {
position: absolute;
left: 50%;
top: 50%;
margin-right: auto;
margin-left: -490px; /* resta la mitad del ancho */
margin-top: -275px; /* resta la mitad del alto */
width: 980px;
height: 550px;
}

.contenido {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="contenido"></div>
</div>
</body>
</html>
  #4 (permalink)  
Antiguo 02/05/2011, 17:08
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ¿Cómo centrar verticalmente el contenido principal?

Hugo:

Yo conozco el tamaño del contenedor, pero no el de la pantalla donde se está viendo (la resolución del monito). Podría ser de 1024x768, 1280x800, 1600x1000, etc.

Y lo que deseo es que quede centrado verticalmente en cualquiera, lo logro con JavaScript obteniendo la resolución del monitor y agregando a una <div> "invisible" el alto necesario para el centrado.

Gracias.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...
  #5 (permalink)  
Antiguo 02/05/2011, 17:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: ¿Cómo centrar verticalmente el contenido principal?

como hemos publicado casi al unisono, creo que no te has percatado de esta solución
  #6 (permalink)  
Antiguo 03/05/2011, 03:02
 
Fecha de Ingreso: enero-2009
Ubicación: Mexico
Mensajes: 99
Antigüedad: 8 años, 11 meses
Puntos: 2
Respuesta: ¿Cómo centrar verticalmente el contenido principal?

Muchas Gracias IsaBelM !!!

Todo funciona correctamente, así como tu indicas.

Ahora solo me queda cambiar el template.
__________________
Yo no desarrollo páginas de internet. Hago Códices Web...

Etiquetas: pantalla, resolución, verticalmente
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 21:23.