Maison >interface Web >tutoriel CSS >Comment centrer l'image dans la boîte CSS
Comment centrer l'image dans la boîte CSS
- 青灯夜游original
- 2021-02-23 15:59:2716285parcourir
Méthode de centrage : 1. Définissez le positionnement relatif de la boîte et le positionnement absolu de l'image ; puis ajustez la position de l'image. 2. Définissez l'élément d'image img en tant qu'élément de niveau bloc ; puis utilisez table-cell et "vertical-align:middle;" pour le centrer. 3. Utilisez la disposition flexbox pour centrer.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
css pour centrer l'image dans la boîte div
La première façon : utiliser l'attribut position de css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1 {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="div1">
<img src="img/1.jpg" / alt="Comment centrer l'image dans la boîte CSS" >
</div>
</body>
</html>Rendu :
Deuxième : Utilisez les nouveaux attributs de css3 table-cell, vertical-align:middle;
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
<div>
<img alt="Comment centrer l'image dans la boîte CSS" >
</div>
Effet :
[Tutoriel recommandé : Tutoriel vidéo CSS]
Troisième type : Utiliser la mise en page Flexbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
img {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div class="div">
<img src="img/1.jpg" / alt="Comment centrer l'image dans la boîte CSS" >
</div>
</body>
</html>Effet :
La quatrième façon : utiliser l'attribut transform (inconvénient : nécessité de prendre en charge Html5)
nbsp;html>
<meta>
<style>
.div {
width: 200px;
height: 200px;
border: 1px solid #000000;
position: relative;
}
img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div>
<img alt="Comment centrer l'image dans la boîte CSS" >
</div>
Rendu :
Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !
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!