Foros del Web » Creando para Internet » CSS »

¿Cómo usar margin: 0 auto con contenido dinámico?

Estas en el tema de ¿Cómo usar margin: 0 auto con contenido dinámico? en el foro de CSS en Foros del Web. Hola muchachada: A ver si me podéis ayudar con este problemilla que tengo para centrar una capa con imágenes. Estoy utilizando margin: 0 auto para ...
  #1 (permalink)  
Antiguo 16/07/2010, 04:30
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
¿Cómo usar margin: 0 auto con contenido dinámico?

Hola muchachada:

A ver si me podéis ayudar con este problemilla que tengo para centrar una capa con imágenes.

Estoy utilizando margin: 0 auto para centrar la capa y eso funciona. Pero me obliga a especificar un width. El caso es que el contenido de la capa es dinámico (1, 2, 3 o 4 imagenes) por lo que no puedo poner un ancho específico. ¿Cómo se puede hacer para centrar un div independientemente del tamaño? Gracias de antemano.

  #2 (permalink)  
Antiguo 16/07/2010, 07:17
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

podes hacer dos cosas:

1) - que tu div en lugar de tener un ID tengas un class y le das la propiedad display:block esto va a hacer que cada div se acomode uno dejo del otro.

2) - podes hacer un div con ID único y dentro de este div pones todas las imagenes, pero antes de esto deberias especificarle que cada imagen tenga un display:block ¿Cómo?:

Código CSS:
Ver original
  1. #tudivcontenedor img{display:block}

Espero te sirva
  #3 (permalink)  
Antiguo 16/07/2010, 07:20
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

¿Te funciona con text-align:center;?
  #4 (permalink)  
Antiguo 17/07/2010, 11:16
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Hola:

Cita:
Iniciado por all-ill Ver Mensaje
¿Te funciona con text-align:center;?
Que yo sepa text-align sirve justamente para eso alinear texto.

Saludos.

  #5 (permalink)  
Antiguo 17/07/2010, 14:41
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Cita:
Iniciado por jomaruro Ver Mensaje
Que yo sepa text-align sirve justamente para eso alinear texto.
Sí, tal y como dice la traducción literal es para alinear texto aunque también alinea los elementos en línea contenidos dentro de un elemento de bloque y se puede utilizar para "resolver" bugs de algunos navegadores antiguos (algunas versiones antiguas de IE, espero que en desuso).

Para centrar un div es mejor con margin:0 auto; especificando width.
Sin especificar width y haciendo que el div deje de comportarse como un elemento de bloque mediante float u otro método para que se adapte al ancho de su contenido, hay varias alternativas (algunas de ellas no muy agradables a la vista cuando se quiere seguir los estándares), entre ellas usar text-align:center, display:table, display:inline-block, posicionamiento relativo de floats, javascript...

Un ejemplo sería usar:
Código CSS:
Ver original
  1. div#centrada{margin:0 auto; display: table;}

Otro ejemplo aunque centra el contenido de #centrada y no la propia capa:
Código CSS:
Ver original
  1. #container{float:left; overflow:hidden; width:100%;}
  2. #centrada{float:left; left:50%; margin:0 auto; position:relative;}
  3. #centrada img{float:left; position:relative; right:50%;}

En la imagen de ejemplo del primer post creo que quiere que las imágenes se vean una al lado de otra.
  #6 (permalink)  
Antiguo 03/09/2010, 10:10
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

fácil.. solo dile esto al width.. si no quieres un tamaño en especifico ej. 200 px o 500 px.. ya q cuando hayan mas imágenes como dices no se verán todas.. entonces dile al width q sea auto! asi <div style="width:auto; height:auto"></div> ya de esta manera lo q cargue dentro del div es lo q le indicará su tamaño final!.. espero haber entendido tu inquietud y haberte respodido! feliz dia!
  #7 (permalink)  
Antiguo 03/09/2010, 10:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Por definición y por las propiedades intrínsecas de un elemento de bloque como es un /div/ si no se altera con declaraciones específicas, su tamaño crecerá en función de los contenidos (excepción hecha de aquellos que se hayan sustraído del flujo) e impidiendo que a sus laterales se coloque ningún otro elemento (es un elemento de bloque) a no ser que se haya alterado también esa particularidad con las declaraciones oportunas.

Así que en un principio, y salvo deficiencia de algún navegador, no es necesario el valor /auto/ para que aumente.

Retomando la duda inicial del usuario:
Sabiendo que para que sea efectivo el valor /Xunidad auto/ del margen para centrar un elemento de bloque y que es condición "sine qua non" que tenga declarada una anchura, cuando a priori no se conoce esa medida o puede variar en función de los contenidos, es tan sencillo solventarlo como declarar /min-width/ y aconsejable también el /max-width/

Todo lo anterior es para centrar ese elemento respecto a su contenedor referente. Otra cuestión distinta es para centrar los contenidos variables y no uniformes respecto del referente inicial.

Acá tiene un ejemplo de centrado múltiple. Sólo tiene que sustituir el /width/ declarado en /.padre/ o mejor en /#segundo/ por lo indicado (min-width y max-width) y alterar los elementos contenidos en él.

Última edición por kseso?; 03/09/2010 a las 10:55
  #8 (permalink)  
Antiguo 03/09/2010, 10:51
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

es decir.. haz esto

<style type="text/css">
.contenedora {width:800px; height: 500px; text-align:center; background:#000}
.centrada {width:auto; margin:0 auto; background:#ccc}
</style>

<div class="contenedora" align="left">
<div class="centrada" align="left">
</div>
</div>

No hace falta q coloques "height" en el div "centrado" ya que lo tomara automatico tambien...
  #9 (permalink)  
Antiguo 03/09/2010, 10:56
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Ok estamos claros.. min-width tambien es uan propiedad.. pero en la peticion del usuario nada tiene que ver... lo unico q quieres es q aumente su div "centrado" segun el contenido q vaya insertando!.. debes ser mas claro con las personas que se estan inciando en esto de los div! no puede hablar de bloques minimos maximos etc! se más explicito! es lo q intento ser!
  #10 (permalink)  
Antiguo 03/09/2010, 11:00
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Cita:
Iniciado por kseso? Ver Mensaje
Por definición y por las propiedades intrínsecas de un elemento de bloque como es un /div/ si no se altera con declaraciones específicas, su tamaño crecerá en función de los contenidos (excepción hecha de aquellos que se hayan sustraído del flujo) e impidiendo que a sus laterales se coloque ningún otro elemento (es un elemento de bloque) a no ser que se haya alterado también esa particularidad con las declaraciones oportunas.

Así que en un principio, y salvo deficiencia de algún navegador, no es necesario el valor /auto/ para que aumente.

Retomando la duda inicial del usuario:
Sabiendo que para que sea efectivo el valor /Xunidad auto/ del margen para centrar un elemento de bloque y que es condición "sine qua non" que tenga declarada una anchura, cuando a priori no se conoce esa medida o puede variar en función de los contenidos, es tan sencillo solventarlo como declarar /min-width/ y aconsejable también el /max-width/

Todo lo anterior es para centrar ese elemento respecto a su contenedor referente. Otra cuestión distinta es para centrar los contenidos variables y no uniformes respecto del referente inicial.

Acá tiene [URL="http://css.devillasbuenas.es/alineacion_multiple.html"]un ejemplo[/URL] de centrado múltiple. Sólo tiene que sustituir el /width/ declarado en /.padre/ o mejor en /#segundo/ por lo indicado (min-width y max-width) y alterar los elementos contenidos en él.


Ok estamos claros.. min-width tambien es uan propiedad.. pero en la peticion del usuario nada tiene que ver... lo unico q quieres es q aumente su div "centrado" segun el contenido q vaya insertando!.. debes ser mas claro con las personas que se estan inciando en esto de los div! no puede hablar de bloques minimos maximos etc! se más explicito! es lo q intento ser!
  #11 (permalink)  
Antiguo 03/09/2010, 11:03
 
Fecha de Ingreso: julio-2008
Mensajes: 12
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Cita:
Iniciado por linternazo Ver Mensaje
Hola muchachada:

A ver si me podéis ayudar con este problemilla que tengo para centrar una capa con imágenes.

Estoy utilizando margin: 0 auto para centrar la capa y eso funciona. Pero me obliga a especificar un width.
por ello lo del width:auto chaval!
  #12 (permalink)  
Antiguo 03/09/2010, 11:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ¿Cómo usar margin: 0 auto con contenido dinámico?

Cita:
Iniciado por gabo66 Ver Mensaje
Ok estamos claros.. min-width tambien es uan propiedad.. pero en la peticion del usuario nada tiene que ver... lo unico q quieres es q aumente su div "centrado" segun el contenido q vaya insertando!.. debes ser mas claro con las personas que se estan inciando en esto de los div! no puede hablar de bloques minimos maximos etc! se más explicito! es lo q intento ser!
¿Tiene usted algún problema de comprensión de mi castellano o español debido a nuestros dispares idiolectos?
Pues eligió la peor forma de manifestarlas.
Para cualquier duda al respecto de los valores posibles para la anchura de un elemento (y lo que cada cual lleva aparejado) consulte usted alguna fuente solvente.
Y como la conclusión que saco es que desconoce las complejidades del valor /auto/ le invito a consultar ésto:
Y mucho me temo, que en su código nada se centra (excepto si pone algún texto dentro de /.contenedora/:
Cita:
Iniciado por gabo66 Ver Mensaje
es decir.. haz esto

<style type="text/css">
.contenedora {width:800px; height: 500px; text-align:center; background:#000}
.centrada {width:auto; margin:0 auto; background:#ccc}
</style>

<div class="contenedora" align="left">
<div class="centrada" align="left">
</div>
</div>

No hace falta q coloques "height" en el div "centrado" ya que lo tomara automatico tambien...
Pruébelo. No hace falta que nos diga qué hace.

Etiquetas: auto, contenido, margin
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 08:32.