Explication détaillée de la façon de centrer verticalement les images en CSS

[Introduction] Lors du dernier recrutement Taobao UED, il y avait une telle question : "Utilisez du CSS pur pour réaliser le centrage horizontal et vertical d'une image de taille inconnue (mais la hauteur et la largeur sont inférieures à 200px) dans un 200px conteneur carré." Bien sûr, la question Ce n'est pas aléatoire, mais a ses propres raisons pratiques. Le centrage vertical est la chose la plus importante dans le travail de Taobao.

Lors du recrutement passé de Taobao UED, il y avait une telle question :

"Utiliser du CSS pur pour atteindre des tailles inconnues L'image (mais la hauteur et la largeur sont inférieures à 200px) est centrée horizontalement et verticalement dans un conteneur carré de 200px. "

Bien sûr, le La question n'est pas aléatoire, mais a ses propres raisons pratiques. Le centrage vertical est la chose la plus importante dans le travail de Taobao.

La difficulté de la question réside en deux points :

1. Centrée verticalement

2. L'image est un élément de remplacement présentant des caractéristiques particulières ;

Quant à la façon de le résoudre, voici un compromis entre une solution de contournement relativement propre et simple en CSS :

.box {

/ *Méthode de centrage vertical reconnue par les navigateurs grand public autres que IE*/

display: table-cell;

vertical-align:middle;

/*Définir le centrage horizontal*/

text-align:center;

/* Hack pour IE */

*affichage : bloquer ;

*font-size: 175px;/*Environ 0,873 de la hauteur, 200*0,873 correspond à environ 175*/

*font-family:Arial;/ *Prévenir les problèmes d'échec de piratage causés par des non-utf-8, tels que l'encodage gbk*/

width:200px;

height:200px;

border : 1px solid #eee;

}

.box img {

/*Définir l'image pour qu'elle soit centrée verticalement*/

 alignement vertical : milieu ;

}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!