Inline-block es un valor de la propiedad display cuya finalidad es hacer que el elemento seleccionado se comporte como un bloque y un elemento en línea. Digamos que es combinar display: inline con display: block. De esta forma nuestro elemento tendrá propiedades de bloque pero no provocará un salto de línea, siempre y cuando entre en el flujo de bloques a dibujar, no superando el ancho disponible.
Si pensamos casos en los que utilizamos float, muchos de ellos se pueden hacer también con inline-block, pero por ejemplo imaginemos este código:
<h1><img src=”icono.png” /> <p>Título</p></h1>
En el navegador veríamos: [icono.png]
Título
Y lo que queremos es que salgan al lado, sin salto de línea. Esto lo podríamos solucionar cambiando la etiqueta “p” por un span o poniéndole la propiedad display: inline. Pero supongamos que queremos utilizar inline-block por los motivos que consideremos. Entonces una buena práctica sería crearnos una clase para ello:
.valign {
display: inline-block;
vertical-align: middle;
}
Con esta clase indicamos además del inline-block, que el elemento se centre en altura en el medio del contenedor padre.
Ahora nuestro código html quedaría de la siguiente manera:
<h1><img src=”icono.png” class=”valign” /><p class=”valign”>Título</p></h1>
Si ejecutamos nuestro código en internet explorer 7 veremos que no funciona, pero existe un truco que consiste en el siguiente código:
.valign {
display: inline;
zoom: 1;
}
Este código css es solo para internet explorer 7, o bien lo montamos en una hoja de estilos aparte para que se requiera cuando sea necesario o le aplicamos hacks a las propiedades para que solo explorer 7 las reconozca.
La idea de esta clase, nos evita gran trabajo al probar la web en explorer 7, dado que no tendremos que crear un fix para cada elemento con inline-block, pues como hemos visto con una sola clase lo solucionamos todo de forma rápida.
Comentarios