Méthode : 1. Ajoutez un style de positionnement relatif à l'élément parent de l'élément photo et un style de positionnement absolu à l'élément photo ; 2. Utilisez l'attribut top et l'attribut "margin-top" pour que la photo soit centrée verticalement. . Ajoutez simplement "top" à l'élément photo. :50%;margin-top:top margin value;" le style est suffisant.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment centrer verticalement une photo avec CSS
Utilisez le positionnement absolu pour obtenir un centrage vertical
1 Ajoutez un attribut de positionnement relatif (position : relative) à l'élément parent de img, et en même temps, ajoutez un attribut de positionnement relatif (position : relative) à l'élément enfant, qui est l'élément image img. Ajoutez un attribut de positionnement absolu (position : absolue).
2. Définissez l'attribut supérieur de l'élément d'image sur 50 %.
3. Nous devons maintenant définir une valeur de marge supérieure négative pour l'élément img. Cette valeur est la moitié de la hauteur de l'élément sur lequel vous souhaitez obtenir un centrage vertical. *Si vous n'êtes pas sûr de la hauteur de l'élément, vous pouvez le faire. ne peut pas utiliser margin-top. Utilisez l'attribut transform:translateY(-50%);
Rappelez-vous : si vous souhaitez réaliser un centrage horizontal en même temps, vous pouvez utiliser la même technique que le centrage vertical.
L'exemple est le suivant :
<html>
<head>
<style type="text/css">
.posdiv{
width: 300px;
height: 250px;
position: relative;
border:1px solid red;
}
.posdiv img{
width: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="posdiv">
<img src="1118.02.png" alt="">
</div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
