Foros del Web » Creando para Internet » CSS »

Crear capa Centrada Horizontal y Verticalmente

Estas en el tema de Crear capa Centrada Horizontal y Verticalmente en el foro de CSS en Foros del Web. Buenas tardes ya tengo posteado un tema donde necesito saber como crear una capa que quede Vertical y Horizontalmente centrada, el problema de esta capa ...
  #1 (permalink)  
Antiguo 22/08/2011, 16:17
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 749
Antigüedad: 7 años, 4 meses
Puntos: 19
Pregunta Crear capa Centrada Horizontal y Verticalmente

Buenas tardes ya tengo posteado un tema donde necesito saber como crear una capa que quede Vertical y Horizontalmente centrada, el problema de esta capa es que su tamano es dinamica, es decir tanto el alto como el ancho puede incrementar...

asi que como la ubico de forma centrada en la pagina??

yo coloque un espacio minimo para el alto y el ancho, pero no se como hacer que qude centrada, como hago??

Muestro el Codigo que tengo:

Código CSS:
Ver original
  1. #cuerpoadmin
  2. {
  3.     display:block;
  4.     position:absolute;
  5.     margin: 0 auto;
  6.     width:auto;
  7.     height:auto;
  8.     min-height:300px;
  9.     min-width:736px;
  10.     padding:1px;
  11.     border:1px solid #F4CF08;
  12.     background-color:#ffffff;
  13.     z-index:10;
  14.     overflow:auto;
  15.     text-align:center;
  16. }

Ayuda Por Favor...
  #2 (permalink)  
Antiguo 23/08/2011, 01:18
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 11 años, 3 meses
Puntos: 54
Respuesta: Crear capa Centrada Horizontal y Verticalmente

bueno si mal no recuerdo era asi, hay q darle alto y ancho al html y al body
Código CSS:
Ver original
  1. html,body{width:100%;height:100%}
  2. body{position:relative}
  3. #cuerpoadmin{position:absolute;top:50%;left:50%;width:500px;height:300px;margin-top:-150px;margin-left:-250px}
tips:
body: en relativo
caja, en absoluto, con ancho y alto y top/left al 50% y luego le restas margen de la mitad del alto y ancho

espero te sirva
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 23/08/2011, 08:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Crear capa Centrada Horizontal y Verticalmente

se me ocurre que al no saber ni el alto ni el ancho que puede ocupar, hay que usar propiedades de tablas
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; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#contenedor {
margin: 0;
width: 100%;
height: 100%;
display: table;
}

#alineacion {
text-align: center;
display: table-cell;
vertical-align: middle;
}

#texto {
margin: 0 auto;
max-width: 300px;
max-height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="alineacion">
<div id="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</div>
</div>
</div>
</body>
</html>
  #4 (permalink)  
Antiguo 23/08/2011, 09:25
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 749
Antigüedad: 7 años, 4 meses
Puntos: 19
Respuesta: Crear capa Centrada Horizontal y Verticalmente

Cita:
Iniciado por emiliodeg Ver Mensaje
bueno si mal no recuerdo era asi, hay q darle alto y ancho al html y al body
Código CSS:
Ver original
  1. html,body{width:100%;height:100%}
  2. body{position:relative}
  3. #cuerpoadmin{position:absolute;top:50%;left:50%;width:500px;height:300px;margin-top:-150px;margin-left:-250px}
tips:
body: en relativo
caja, en absoluto, con ancho y alto y top/left al 50% y luego le restas margen de la mitad del alto y ancho

espero te sirva
Es que con tu opcion tengo que limitar el alto y ancho cosa que no quiero, como te dije es un div dinamico, me tengo que limitar a usar porcentajes y tus valores son pixeles

Cita:
Iniciado por IsaBelM Ver Mensaje
se me ocurre que al no saber ni el alto ni el ancho que puede ocupar, hay que usar propiedades de tablas
Bueno este codigo lo voy a probar haber que me sale de aqui, soy muy nuevo con las divs y e leido muchisimo y veo que el problema no es el centrado horizontal si no el vertical es un poco complejo de hacerlo y al ver los problemas de interpretacion que tienen los navegadores hace el trabajo mas arduo...
  #5 (permalink)  
Antiguo 23/08/2011, 12:24
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 11 años, 3 meses
Puntos: 54
Respuesta: Crear capa Centrada Horizontal y Verticalmente

bueno con tablas tambien es una buena opción, aunque no sea la correcta semanticmaente hablando
y sino un poquito de javascript y listo ;)
__________________
Degiovanni Emilio
developtus.com
  #6 (permalink)  
Antiguo 23/08/2011, 13:35
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Crear capa Centrada Horizontal y Verticalmente

Cita:
Iniciado por emiliodeg Ver Mensaje
bueno con tablas tambien es una buena opción, aunque no sea la correcta semanticmaente hablando
y sino un poquito de javascript y listo ;)
tablas?? quien ha usado tablas??
javascript?? es que no queda demostrado que se puede hacer con css??
entes de postear lee bien por que ya es la segunda vez que metes la pata en este tema
  #7 (permalink)  
Antiguo 23/08/2011, 17:27
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 749
Antigüedad: 7 años, 4 meses
Puntos: 19
Respuesta: Crear capa Centrada Horizontal y Verticalmente

Bueno no quiero usar tablas la idea es hacerlo con css... estoy aplicando la idea de ISABELM asi que gracias por sus repuestas xD

Etiquetas: ancho, centrada, horizontal, verticalmente, fondo, capas
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 03:51.