Introducción al artículo de Wulin.com (www.vevb.com): Cómo centrar las imágenes verticalmente.
El ancho y la altura de la imagen son desconocidos, y no hay un tamaño fijo. Bajo esta premisa, es bastante problemático hacer que la imagen se centre verticalmente en un contenedor con ancho y altura fijos. Dado que los proyectos recientes pueden usar esta solución, he recopilado y resuelto algunos métodos de uso común.
La siguiente figura es una representación ideal. El ancho y la altura del contenedor externo son fijos, y el ancho y la altura de la imagen en el medio son desconocidos, pero la imagen siempre debe centrarse verticalmente en relación con el contenedor externo.
Sin embargo, el efecto implementado en la realidad no es perfecto. Dado que el análisis de cada navegador es diferente, cada navegador tendrá una desviación de 1px-3px.
Método 1 (XHTML 1.0 Transición):
Este método es establecer el modo de visualización del contenedor externo para mostrar: tabla, anidar una etiqueta de tramo fuera de la etiqueta IMG y establecer el modo de visualización del tramo para mostrar: célula de tabla, para que el alineado vertical se pueda alinear fácilmente como elementos de tabla. Por supuesto, esto es solo en navegadores estándar, IE6/IE7 también necesita usar el posicionamiento.
Parte de estructura HTML:
<div id = box>
<span> <img src = images/demo.jpg alt => </span>
</div>
Parte de estilo CSS:
<estilo type = text/css>
#caja{
Ancho: 500px; Altura: 400px;
Pantalla: tabla;
Text-Align: Center;
borde: 1px sólido #d3d3d3; fondo: #fff;
}
#Box Span {
Display: Cel-Cell;
Align vertical: medio;
}
#box img {
borde: 1px sólido #ccc;
}
</style>
<!-[si LTE IE 7]>
<estilo type = text/css>
#caja{
Posición: relativo;
desbordamiento: oculto;
}
#Box Span {
Posición: Absoluto;
Izquierda: 50%; arriba: 50%;
}
#box img {
Posición: relativo;
Izquierda: -50%; arriba: -50%;
}
</style>
<! [endif]->
Método 2 (XHTML 1.0 Transición):
Los principios y estructuras de la implementación del Método 2 y el Método 1 son similares, y las estructuras son las mismas. El método 1 utiliza anotaciones condicionales, y el método 2 usa CSS Hack.
Parte de estilo CSS:
<estilo type = text/css>
#caja{
Ancho: 500px; Altura: 400px;
desbordamiento: oculto;
Posición: relativo;
Display: Cel-Cell;
Text-Align: Center;
Align vertical: medio;
borde: 1px sólido #d3d3d3; fondo: #fff;
}
#Box Span {
Posición: estática;
*Posición: Absoluto; /*Hack para IE6/7*/
arriba: 50%; /*Hack para IE6/7*/
}
#box img {
Posición: estática;
*Posición: relativo; /*Hack para IE6/7*/
arriba: -50%; Izquierda: -50%; /* Hack para IE6/7*/
borde: 1px sólido #ccc;
}
</style>
Este método tiene una desventaja. En un navegador estándar, dado que el modo de visualización del contenedor externo #Box es Muestra: Cell-Cell, el atributo de margen no se puede usar para #Box, y la configuración de los bordes en IE8 también no es válido.
Método 3 (XHTML 1.0 Strict):
Los navegadores estándar aún establecen el modo de visualización del contenedor externo #Box para mostrar: Table-Cell. IE6/IE7 usa el método para insertar un par de etiquetas vacías frente a la etiqueta IMG.
Parte de estructura HTML:
<div id = box> <i> </i> <img src = images/damo.jpg alt => </div>
Parte de estilo CSS:
<estilo type = text/css>
#caja{
Ancho: 500px; Altura: 400px;
Display: Cel-Cell;
Text-Align: Center;
Align vertical: medio;
borde: 1px sólido #d3d3d3; fondo: #fff;
}
#box img {
borde: 1px sólido #ccc;
}
</style>
<!-[si es decir]>
<estilo type = text/css>
#Box I {
Pantalla: bloque en línea;
Altura: 100%;
Align vertical: medio
}
#box img {
Align vertical: medio
}
</style>
<! [endif]->
El método 3 también se aplica a XHTML 1.0 Transitional. Los métodos anteriores se recopilan del sitio web de enseñanza web. Por el momento, solo estos tres métodos están bastante satisfechos, y la compatibilidad es buena y las limitaciones son relativamente pequeñas. También he probado algunos métodos uno por uno, pero los resultados no son ideales, y hay diferencias bastante diferentes entre los diferentes navegadores. Además, Situ Zhengmei también ha recopilado algunos métodos aquí.
Pensamiento: muchos métodos confían en configurar el modo de visualización del contenedor externo en una tabla para lograr un centrado vertical, es decir, el DIV para simular la tabla. Qué bueno sería si CSS tenga una propiedad para lograr este efecto. Si tiene un buen método, puede compartirlo.
original: