Imagenes centradas dentro de un div

Takitei · #1 (**permalink**) 08/01/2005, 21:24

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!

Scour · #2 (**permalink**) 08/01/2005, 21:47

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.

caricatos · #3 (**permalink**) 09/01/2005, 02:18

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

Takitei · #4 (**permalink**) 09/01/2005, 12:57

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!

braulito · #5 (**permalink**) 09/01/2005, 17:28

Simplemente usa esto:

Código:

.post-body img {
  margin: auto;
}

ignacio_giri · #6 (**permalink**) 09/01/2005, 19:21

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,

Takitei · #7 (**permalink**) 09/01/2005, 19:37

Nop... eso no funciona. Tal como dijo Scour al inicio... hay que colocarle el display:block para poder usar eso!...

caricatos · #8 (**permalink**) 10/01/2005, 01:08

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

Takitei · #9 (**permalink**) 10/01/2005, 07:18

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.