Maison > interface Web > tutoriel CSS > Comment définir la position de l'image au centre en CSS

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

王林
Libérer: 2023-01-03 09:26:24
original
5433 Les gens l'ont consulté
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 [

Comment définir la position de l'image au centre en CSS p> hauteur de ligne : 300 px;].

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

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>
Copier après la connexion

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;
}
Copier après la connexion

L'effet est le suivant :

Comment définir la position de limage au centre en CSS

Utilisez la méthode d'arrière-plan : <🎜. >

Le code html est le suivant :

<div class="img_wrap"></div>
Copier après la connexion

Le code css est le suivant :

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

L'effet est le suivant :

Comment définir la position de limage au centre en CSS

(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>
Copier après la connexion

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;
}
Copier après la connexion
Effet L'image est la suivante :


Comment définir la position de limage au centre en CSS

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!

É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