Foros del Web » Creando para Internet » CSS »

Imagenes centradas dentro de un div

Estas en el tema de Imagenes centradas dentro de un div en el foro de CSS en Foros del Web. Hola a todos... Tengo un div asi: <div class="post-body"> bla bla bla texto texto texto <img src="imagen.gif" /> </div> Me gustaría que esa imagen dentro ...
  #1 (permalink)  
Antiguo 08/01/2005, 21:24
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 19 años, 6 meses
Puntos: 5
Imagenes centradas dentro de un div

Hola a todos...

Tengo un div asi:

<div class="post-body">
bla bla bla texto texto texto
<img src="imagen.gif" />
</div>

Me gustaría que esa imagen dentro de div quede centrada... debería ser algo asi:

.post-body img {text-align:center;}

Pero no funciona !!!... ¿me estoy equivocando en algo?... ayuudaaa!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #2 (permalink)  
Antiguo 08/01/2005, 21:47
Avatar de Scour  
Fecha de Ingreso: octubre-2003
Ubicación: Murcia (España)
Mensajes: 94
Antigüedad: 20 años, 4 meses
Puntos: 0
Buenas, efectivamente, no se puede centrar una imagen con text-align, el motivo es el siguiente:

El atributo text-align afecta al contenido de una etiqueta, no a la etiqueta en sí. Si aplicas ese estilo, por ejemplo, a un parrafo, lo que se alinea es el contenido, no la etiqueta:

<p>A este espacio afecta el alineado</p>

Sin embargo, la etiqueta <img> es una etiqueta vacía, luego no tiene contenido, así que el text-align no le afecta. Si se pudiera poner:

<img>ruta de la imagen</img>

si que funcionaría.

Para centrar una imagen, hay basicamente 2 formas:

La más correcta sería convertir a la imagen en un elemento de bloque (para que el navegador le asigne el salto de carro antes y después) y darle margenes automáticos, esto es:

img {
display: block;
margin: auto;
}

Sin embargo, esto no funciona en mi odiado IE5.X, con lo que, el otro metodo, si bien menos correcto, no da problemas.

Este otro metodo sería, seguiendo la explicación de como funciona el text-align, asignarle dicha propiedad a una etiqueta que sea contenedora de la imagen, de modo que la imagen será el contenido afectado. Se puede hacer con <div> o <p> por ejemplo (etiquetas de bloque):

CSS

.centrar {
text-align: center;
}

(X)HTML

<p class="centrar"><img src="ruta" alt="lo que sea"></p>

Un saludo.
  #3 (permalink)  
Antiguo 09/01/2005, 02:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola a todos:

El truco que tu uso para centrar imágenes es ponerlas como fondo de una capa, con background.

<div id="capa" style="background: url(fondo.gif) no-repeat center center;">
</div>

Incluso de esa manera no sale el odioso menu "explorer" para imprimir, etc...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 09/01/2005, 12:57
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 19 años, 6 meses
Puntos: 5
Bueh... ahora si que entiendo. Mil gracias a todos. Decidí hacerlo asi:

.post-body div {text-align:center;}

<div class="post-body">
<div><img src="imga.png" /></div>
</div>

Un saludote!
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #5 (permalink)  
Antiguo 09/01/2005, 17:28
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 19 años, 10 meses
Puntos: 8
Simplemente usa esto:

Código:
.post-body img {
  margin: auto;
}
  #6 (permalink)  
Antiguo 09/01/2005, 19:21
Avatar de ignacio_giri  
Fecha de Ingreso: febrero-2003
Ubicación: Argentina, Rosario
Mensajes: 585
Antigüedad: 21 años, 1 mes
Puntos: 0
Cita:
Iniciado por caricatos
Hola a todos:
Incluso de esa manera no sale el odioso menu "explorer" para imprimir, etc...
Caricatos: te comento que usando...

Código HTML:
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta http-equiv="imagetoolbar" content="no"/> 
entre <head> y </head> no aparece el odioso menu "explorer", sin tanto espamento...

Saludos, Saludos,
__________________
Ignacio
  #7 (permalink)  
Antiguo 09/01/2005, 19:37
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 19 años, 6 meses
Puntos: 5
Nop... eso no funciona. Tal como dijo Scour al inicio... hay que colocarle el display:block para poder usar eso!...
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
  #8 (permalink)  
Antiguo 10/01/2005, 01:08
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Cita:
Iniciado por ignacio_giri
Caricatos: te comento que usando...

Código HTML:
<meta name="MSSmartTagsPreventParsing" content="true"/>
<meta http-equiv="imagetoolbar" content="no"/> 
entre <head> y </head> no aparece el odioso menu "explorer", sin tanto espamento...

Saludos, Saludos,
Gracias por la información, pero me he leído todas las FAQs (x)html, javascript y css, y en muchas ocasiones he recomendado que se lean.

Una razón añadida para usar css en estos casos es que el centrado también se hace verticalmente...

Sé que también se puede hacer con los estilos top y left (position:absolute), pero no es necesario calcularlo.

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 10/01/2005, 07:18
Avatar de Takitei  
Fecha de Ingreso: septiembre-2004
Ubicación: Venezuela
Mensajes: 1.231
Antigüedad: 19 años, 6 meses
Puntos: 5
Precisamente... en mi web... todas las imágenes que aparecen, exceptuando el logo del header y las imágenes de las noticias... aparecen como background de <div>s

La verdad es que usando esas formas se tiene muchas ventajas en comparación con colocar una etiqueta <img> directamente.
__________________
Takitei
Ingeniarte.com
DannyHerran.com
"Dadme un punto de apoyo y moveré la tierra" - Arquímedes.
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 02:58.