Maison > interface Web > tutoriel CSS > Conseils pour centrer verticalement les images à l'aide de l'échange css_Experience

Conseils pour centrer verticalement les images à l'aide de l'échange css_Experience

WBOY
Libérer: 2016-05-16 12:05:34
original
1595 Les gens l'ont consulté

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

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

.box {
/*Méthode de centrage vertical reconnue par les navigateurs grand public autres que IE*/
affichage : table-cellule ;
vertical-align:middle;

/*Définir le centrage horizontal*/
text-align:center;

/* Hack pour IE */
*affichage : bloquer ;
*font-size : 175px;/* correspond à 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 un code non utf-8, tel que l'encodage gbk*/

largeur:200px;
hauteur : 200px ;
bordure : 1px solide #eee ;
}
.box img {
/*Définir l'image pour qu'elle soit centrée verticalement*/
vertical-align:middle;
}


Conseils pour centrer verticalement les images à l'aide de l'échange css_Experience


Bien sûr, il existe d’autres solutions, que je n’aborderai pas ici.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal