Trois façons de centrer les images avec CSS

Dans notre processus de développement CSS WEB front-end, nous évitons la situation de centrage de l'image. Pour le bien de la beauté de la page Web et de l'expérience utilisateur, nous devons parfois centrer l'image, donc nous savons tous comment. pour centrer l'image. Il y en a beaucoup, et aujourd'hui nous allons vous présenter en détail les trois façons de centrer les images avec CSS !

1. Utilisez display:table-cell, le code spécifique est le suivant :

le code html est le suivant :

1 <p class="img_wrap">
2  <img src="wgs.jpg">
3 </p>

le code css est le suivant :

1 .img_wrap{
2     width: 400px;
3     height: 300px;
4     border: 1px dashed #ccc;
5     display: table-cell; //主要是这个属性
6     vertical-align: middle;
7     text-align: center;
8 }

L'effet est le suivant :

2. Utilisez la méthode d'arrière-plan :

Le code html est le suivant :

1 <p class="img_wrap"></p>

Le code CSS est le suivant :

.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    background: url(wgs.jpg) no-repeat center center;
}

L'effet est le suivant :

3. Utilisez une balise p en dehors du image, et définissez la line-height pour centrer l'image verticalement :

le code html est le suivant :

1 <p class="img_wrap">
2     <p><img src="wgs.jpg"></p>
3 </p>

le code css est le suivant :

 1 *{margin: 0px;padding: 0px} 
 2 .img_wrap{ 
 3     width: 400px; 
 4     height: 300px; 
 5     border: 1px dashed #ccc; 
 6     text-align: center;} 
 7 .img_wrap p{ 
 8     width:400px; 
 9     height:300px;
 10     line-height:300px;  /* 行高等于高度 */
 11 }
 12 .img_wrap p img{
 13     *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
 14     vertical-align:middle;
 15     border:1px solid #ccc;
 16 }

Le rendu est le suivant :

Résumé :

Il existe de nombreux façons de centrer l'image. Nous présentons ici trois méthodes couramment utilisées. Les amis peuvent choisir la méthode qui vous convient en fonction de leurs propres besoins, j'espère qu'elle sera utile à votre travail !

Recommandations associées :

Comment centrer l'image CSS

Centrage d'image CSS : centrage d'image CSS vers le haut, le bas, la gauche et la droite (centré horizontalement et verticalement)

Comment centrer le texte et des images en code HTML ?

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!