Foros del Web » Creando para Internet » CSS »

Centrar Vertical y Horizontal a capa Dinamica

Estas en el tema de Centrar Vertical y Horizontal a capa Dinamica en el foro de CSS en Foros del Web. Buenas tengo una capa que tiene un ancho y alto dinamico, lo unico que especifique fue un alto min y un ancho minimo para que ...
  #1 (permalink)  
Antiguo 20/08/2011, 12:26
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 14 años, 9 meses
Puntos: 19
Pregunta Centrar Vertical y Horizontal a capa Dinamica

Buenas tengo una capa que tiene un ancho y alto dinamico, lo unico que especifique fue un alto min y un ancho minimo para que no me creara las scroll bars

el problema que tengo es que quiero que dicha capa que no ocupa toda la pantalla quede centrada tanto horizontal como verticalmente y obviamente al cambiar su contenido se valla centrando...

como es posible hacer eso?? yo tengo este codigo:

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. }

se que con Top,Left, Right, Bottom, no me funcionara porque eso posiciona el Div en una posicion exacta y mas bien creo q el mio varia, pero bueno la verdad nose como centrarlo...

si alguien me ayuda con eso me seria de gran utilidad
  #2 (permalink)  
Antiguo 23/08/2011, 19:28
 
Fecha de Ingreso: septiembre-2008
Mensajes: 25
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Centrar Vertical y Horizontal a capa Dinamica

La solución sería más o menos así... anteriormente tuve un dilema parecido, y esta solución me funciono de maravilla!!! Analiza un poco el código y me avisas que tal... aquí tienes el enlace con toda info... el autor se esmero en escribir a detalle, http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Código HTML:
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

<style type="text/css">
#outer {width: 100%;height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {width: 200px; margin-left: auto; margin-right: auto;position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style> 
Saludos!!!
  #3 (permalink)  
Antiguo 24/08/2011, 08:00
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 14 años, 9 meses
Puntos: 19
Respuesta: Centrar Vertical y Horizontal a capa Dinamica

Bueno ya me colocaron una Solucion algop similar a la que tu me diste, cosa que estoy evaluando porque para salir del paso y entregar un preliminar tube que usar tablas, ahora en tu ejemplo a pesar de que busco algo DINAMICO usastes tamanos definidos en PX, Propbare tu Codigo usando valores en % haber si funciona como busco... Gracias por aportar esa idea :) si supiera como agradecerte lo haria...

Etiquetas: ancho, contenido, dinamica, horizontal, vertical, 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 19:47.