Mucha gente dice por ahí que no se pueden alinear las imágenes verticalmente, en todos los navegadores. Yo encontré una página donde lo conseguían y logre adaptarlo a todos los navegadores..
La idea fundamental de este código es alinear una imagen dentro de un contenedor, es decir, que se centre dentro de ese contenedor, no en toda la página.
El código html que tengo es este..
< class="lista_empresas">
< class="lista_empresas_centrado">
< class="centrado_vertical">
< class="lista_img_ancho" alt="ACADEMIA POSTAL 3 VIGO" title="ACADEMIA POSTAL 3 VIGO" src="http://www.blogger.com/images/imagen1.png">
< / span>
< / div>
< / div>
y en mi css tengo:
.lista_empresas {
display: table;
float: left;
width:150px;
height:150px;
margin:5px;
position:relative;
text-align:center;
}
.lista_empresas_centrado {
display:table-cell;
margin:0 auto;
text-align:center;
vertical-align:middle;
width:100%;
}
span.centrado_vertical {
display:block;
position: relative;
top: -50%;
}
.lista_empresas img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
/*border: 1px solid red;*/
}
.lista_img_ancho {
width: 150px;
}
La idea de esto es establecer un contenedor que asegure que la imagen no es mas grande (lista_empresas).
Dentro establecemos otro contenedor y dentro un span con el centrado.
Dentro de este esta la imagen en la que establecemos un max-width 150px,
pero como solo funciona para Firefox a continuación metemos un width para Internet Explorer.
Es posible que este método "suba" tu imagen 75px en ie, por lo que es necesario añadir en tu css lo siguiente:
* html .lista-margin-solo-ie{ margin: 75px; } /* hack IE6 */
.lista-margin-solo-ie{ *margin:75px;} /* hack IE7 */
y un div vacio antes de la imagen.
< class="lista-margin-solo-ie">< /div>
Espero que os sirva de algo.
0 comentarios