JMiur [E]

Un muy interesante tip de Stu Nicholls: Cómo centrar una imagen de dimensiones desconocidas en un bloque DIV de cierto tamaño. Es cierto, es bastante viejo, se publicó en el 2006 pero, sigue siendo una muy buena idea y funciona en todos los navegadores.

Claro, en Internet Explorer requiere utilizar un pequeño hack ya que se les ha ocurrido utilizar un valor que no es reconocido por la w3.org (inline-blocks) mientras todos los demás navegadores, utilizan el valor table-cell para emularlo.

¿Para qué tanto lio si centrar algo es fácil? Creamos el DIV, lo dimensionamos y establecemos las propiedades text-align y vertical-align:
<div style="
width: 500px;
height: 200px;
text-align: center;
vertical-align: middle;
background: #E0E0E0;">
<img src="URL_imagen" />
</div>

¡Epa, no funciona! Se centra horizontalmente pero no verticalmente.

Si en vez de utilizar DIV, usamos una tabla y ponemos la imagen en una celda, las propiedades funcionan correctamente:
<table width=500 height=200px border=0>
<tr>
<td style="
width: 500px;
width: 500px;
height: 200px;
text-align: center;
vertical-align: middle;
background: #E0E0E0;">
<img src="URL_imagen" />
</td>
</tr>
</table>



Entonces, podemos aprovechar que el CSS nos permite convertir cualquier elemento en una pseudo-celda de una tabla (como si fuera TD o TH). Para eso, tenemos la propiedad display y el valor table-cell:
<div style="
display: table-cell;
width: 500px;
height: 200px;
text-align: center;
vertical-align: middle;
background: #E0E0E0;">
<img src="URL_imagen" />
</div>

Perfecto, pero si estamos usando Internet Explorer, no pasa nada, todo sigue igual.

Bueno, es aquí cuando llega la ayuda. Utilizamos clases para simplificar el ejemplo:
<style type="text/css">

/* el código "normal" es igual al usado hasta ahora */

div.holder {
display: table-cell;
width: 500px;
height: 200px;
text-align: center;
vertical-align: middle;
background: #E0E0E0;
}

</style>

<!--[if IE]>
<style type="text/css">

/* y aquí es donde se debe establecer el código para IE */

#edge {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}

#container {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}

</style>
<![endif]-->
Y este sería el código HTML:
<div class="holder">
<span id="edge"></span>
<span id="container"><img src="URL_imagen" /></span>
</div>
En el ejemplo puede verse como podemos centrar imágenes de diferentes tamaños sin necesidad de modificar las instrucciones:


[ 1 ] [ 2 ] [ 3 ] [ 4 ]

11 comentarios:

David Trallero Mean  

Hay una forma mucho mas sencilla de centrar imagenes dentro de un div. Supongamos un div the 400x100 en el que queremos poner dentro una imagen cualquiera.

< div style="width: 400px: height: 100px;">

< div style="width: 400px; height: 100px; background-image:url(laimagen a centrar); background-position: 50% 50%; background-repeat: no-repeat">< /div>

< /div>

(lo he escrito de memoria, pero creo que no me dejo nada)

En mi caso, el div mas externo puede tener efectos de hover para iluminar la imagen cuando se pasa el raton por encima.

Un saludo de alguien que se frustro cenrando imagines ;)

Responder
JMiur  

Antes que nada: gracias por el aporte :)

¿Quién no se ha visto frustrado centrando imágenes? :$

Tu código es correcto pero aquí deberíamos entrar en sutilezas. Por ejemplo, la imagen del ejemplo es un fondo y no un elemento independiente. Por supuesto, dependiendo del uso que queramos darle, esto no tiene la menor importancia.

Mi única conclusión es: ¡qué complicado es centrar imágenes verticalmente y que se vean correctamente en cualquier navegador! :D

Responder
Gem@  

Yo me he quedado con eso de (lo he escrito de memoria, pero creo que no me dejo nada)
Sana envidia es lo que siento además de frustación centrado imágenes jajaja sorry.
Es genial ;)

Responder
Anónimo  

Gracias JMiur, el ejemplo que coloco este tio de la imagen como fondo es una mierda,el tuyo es el que mola mas, gracias tio me has salvado!!!! eres un groso!

Responder
Anónimo  

Mi hermano me ha salvado un poco de cordura jejeje GRACIAS!!!

Responder
I  

Monumental. Funciona perfecto!!! Es la mejor solucion que encontré en la red, despues de horas de búsqueda...

Responder
Darwin Tony  

:)

Responder
Admin  

Hola Jmiur tengo una duda como puedo acomodar unas imagenes de una forma particular mira la siguiente imagen, quiero acomodar imagenes asi pero no se como.

link imagen ejemplo: http://img704.imageshack.us/img704/6862/ejemploimagen.png

Espero que me puedas ayudar =)

Y otra pequeña duda como puedo colocar imagenes dentro de las entradas y que por ejemplo al cambiar de plantilla yo pueda cambiar la imagen con algun codigo sin editar la entrada y cambiarla?

Responder
JMiur  

Habría que ver el ejemplo online. Así, en egenral, bastaría colocar las 4 en un DIV centrado sin saltos de línea entre ellas ya que si el tamaño es más o menos coo se ve en la imagen, se acomodrán solas.

Si hay codigos escritos en una entrada, estos, sólo pueden ser modificados desde la misma entrada o bien usando algún script que cambie ese dato posteriormente pero, en este último caso, el código sería excesivamente complejo porque habría que indicar una por una y además, habría un cambio evidente a cualquiera que mire el sitio; se vería la original y luego, la nueva lo que tendría un efecto visual feo además de sobrecarga el sito de modo excesivo.

La única manera lógica de hacer algo así es emplear CSS y que las imagenes sean fondos.

Responder
Luis  

oye jmiur tengo este codigo en la plantilla mia de juegos pero le modifico algo y no pasa nada y lo quisiera eliminar se podra?

/* wireframe layout tweaks */
body#layout *{margin:0;padding:0;}
body#layout #outer-wrapper {width:750px;}
body#layout #main-wrapper{width:40%;}
body#layout #copyr {display:none;}
body#layout #header-wrapper{height:60px;}
body#layout #content-wrapper{padding-top:px;}


y quisiera saber para que sirve esto: word-wrap: break-word; lo tengo en el codigo de la sidebar..

ay algun tutorial para aprender el codigo de blogger y css?

Responder
JMiur  

Todo lo que está en /* wireframe layout tweaks */ controla la forma en que se muestra la plantilla en el modo Diseño | Elementos de la página. La última línea es errónea:
body#layout #content-wrapper{padding-top:px;}
falta el valor.

word-wrap permite establecer la forma en que se manejan los saltos de línea. Cuando una palabra es demasaido larga, se corta y continua en la línea inferior. Sólo servía en IE pero ahora ya se aplcia al resto de los navegadores. Evitará que textos largos descompaginen los diferentes sectores del blog.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR