Ajustar div al contenido (en ancho)

super_rayo · #1 (**permalink**) 16/02/2012, 09:07

¿Qué hay foreros?

Tengo una pregunta para ustedes:

¿Cómo es posible ajustar el ancho del div al contenido que tenga? Por ejemplo: tengo una img dentro de un div y este div rodea perfectamente a la img.

Y... también que estuviera centrado.

¿Alguna idea? Muchas gracias!

cqg2509 · #2 (**permalink**) 16/02/2012, 10:16

Hola super_rayo!!
Para que se ajuste al contenido del div tienes que asignarle el atributo position: absolute.
Y después si quieres que esté centrado el position: absolute no te sirve porque te posiciona el div lo más arriba a la izquierda posible, como si fuera un eje de coordenadas empezando por arriba, en el eje (0, 0).
Entonces para centrarlo tienes que poner el position: relative (el position: relative está asignado y no hace falta que lo escribas) y para que esté bien centrado la única manera es asignándole al div la misma anchura que la de la imagen. Después hay que asignarle un par más de atributos al div y al body. Te lo dejo aquí:
Suponiendo que la imagen es de 200x200:

Código HTML:

Ver original<HTML>
<HEAD>
<STYLE TYPE="text/css">
body
{
margin: 0 auto;
text-align: center;
}
 
#divimagen
{
margin: 0 auto;
text-align: left;
width: 200px;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="divimagen">
<IMG SRC="imagen.jpg">
</DIV>
</BODY>
</HTML>

Saludos!

xFantaSx · #3 (**permalink**) 16/02/2012, 10:29

Hola, pues también lo podrías hacer con display=inline-block, con esta propiedad el div se ajustará a su contenido.
Ahora, para centrarlo, tendrías que hacer un div que contenga a ese otro div con la propiedad de text-align:center.
De esta forma no tendrás que especificar el ancho del div para que se centre. ;).
Te dejo el código de una prueba (puse un borde y una imágen de internet para que veas como funciona).

Código HTML:

Ver original<html>
<head>
<title>
</title>
<style type="text/css">
 
.contenedor {
    text-align:center;
}
.div1{
    border:solid 4px black;
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
</style>
 
 
</head>
<body>
<div class="contenedor">
<div class="div1">
<img src="http://www.lossimpsons.net/Imagenes/navidadsimpsons2.gif"/>
</div>
</div>
 
</body>
</html>

saludos.!

super_rayo · #4 (**permalink**) 16/02/2012, 13:51

Gracias a los dos! Me sirvió y con éxito.