Explication détaillée d'un exemple de centrage vertical d'images de taille inconnue en utilisant du CSS pur

1. Méthode de Taobao

Il y avait une telle question dans le précédent "Taobao UED Recruitment" :

"Utiliser du CSS pur pour implémenter des images de taille inconnue (mais la hauteur et largeur Les deux mesurent moins de 200 px) centrés horizontalement et verticalement dans un conteneur carré de 200 px. "

Bien sûr, la question n'est pas arbitraire, mais a ses propres raisons pratiques. Le centrage vertical est un problème le plus couramment rencontré dans. Travail Taobao, très représentatif.

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

Centrée verticalement
L'image est un élément de remplacement et présente des caractéristiques particulières ;
Quant à la façon de le résoudre, voici un compromis entre une solution simple et relativement propre en CSS :

.box {

display: table-cell;
vertical -align: middle;

text-align:center;

*affichage: bloc;
*font-size: 175px;
*font- famille:Arial ;

largeur:200px;
hauteur:200px;
bordure: 1px solide #eee;
}
.box img {

vertical- align:middle ;
}

2. Méthode d'arrière-plan

Le fond La méthode est simple mais pas les images propices à l'importation dynamique

3. Méthode d'arrière-plan

.qq {
width:500px;
display:table-cell;
height:400px;
text-align:center;
vertical-align:middle;
border: 1px solid #000
}
i {
display:inline-block;
hauteur : 100 % ;
Alignement vertical : milieu
}
.qq img {
 alignement vertical : milieu ;
>

Ce type La méthode est également très simple, mais vous devez ajouter une balise supplémentaire de

Si la page a besoin d'une ou deux images centrées, alors cette méthode est recommandée, mais s'il y a beaucoup de photos de produits, ajoutez le tag La quantité est relativement importante

Autres solutions, les amis intéressés peuvent cliquer :

div {
height: 400px;
Line-height: 400px;
overflow: Hidden;
}

Cette méthode n'est également applicable qu'à une seule ligne de texte ou image + texte , généralement utilisé pour les liens ou les titres avec de petites icônes devant.

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!