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

[linternazo]

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.

[DragonX]

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:

#tudivcontenedor img{display:block}
 

Espero te sirva

[all-ill]

¿Te funciona con text-align:center;?

[jomaruro]

Hola:

Iniciado por all-ill

¿Te funciona con text-align:center;?

Que yo sepa text-align sirve justamente para eso alinear texto.

Saludos.

[all-ill]

Iniciado por jomaruro

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:

div#centrada{margin:0 auto; display: table;}
 

Otro ejemplo aunque centra el contenido de #centrada y no la propia capa:

Código CSS:

#container{float:left; overflow:hidden; width:100%;}
#centrada{float:left; left:50%; margin:0 auto; position:relative;}
#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.

[gabo66]

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!

[kseso?]

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.

[gabo66]

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

[gabo66]

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!

[gabo66]

Iniciado por kseso?

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!

[gabo66]

Iniciado por linternazo

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!

[kseso?]

Iniciado por gabo66

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/:

Iniciado por gabo66

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.