Comment définir la position de l'image au centre en CSS

Comment définir l'image pour qu'elle soit centrée en CSS : vous pouvez ajouter une balise p à l'extérieur de l'image, puis centrer l'image en définissant l'attribut de hauteur de ligne, tel que [

p> hauteur de ligne : 300 px;].

L'environnement d'exploitation de cet article : système Windows10, CSS 3, ordinateur Thinkpad T480.

La méthode spécifique est la suivante :

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

le code html est le suivant :

<div class="img_wrap">
 　　<img  src="wgs.jpg" alt="Comment définir la position de l'image au centre en CSS" >
</div>

le code CSS est le suivant :

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

L'effet est le suivant :

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

Le code html est le suivant :

<div class="img_wrap"></div>

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 :

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

3. Utilisez une balise p à l'extérieur de l'image et centrez l'image verticalement en définissant la hauteur de ligne :

html. le code est le suivant :

 <div class="img_wrap">
     <p><img  src="wgs.jpg" alt="Comment définir la position de l'image au centre en CSS" ></p>
 </div>

le code CSS est le suivant :

*{margin: 0px;padding: 0px}
.img_wrap{
    width: 400px;
    height: 300px;
    border: 1px dashed #ccc;
    text-align: center;}
.img_wrap p{
    width:400px;
    height:300px;
    line-height:300px;  /* 行高等于高度 */
}
.img_wrap p img{
    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}

Effet L'image est la suivante :

Recommandations associées :

Tutoriel CSS

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!