Maison > Article > interface Web > Comment utiliser display:table-cell pour réaliser un centrage vertical ?
Comment utiliser display:table-cell pour réaliser un centrage vertical ?
- 不言original
- 2018-10-24 15:26:255110parcourir
Dans la mise en page d'une page Web, nous avons souvent besoin de centrer verticalement des images ou du texte. Il existe de nombreuses façons d'obtenir un centrage vertical. Aujourd'hui, je vais vous présenter comment réaliser un centrage vertical à l'aide de l'attribut display:table-cell. regardez ci-dessous. Voir le contenu spécifique.
Tout d'abord, jetons un bref coup d'œil à l'attribut display:table-cell
l'attribut display:table-cell signifie que l'élément label est présenté dans sous la forme d'une cellule de tableau, similaire à la balise td, utilisez display:table-cell pour centrer verticalement les éléments de tailles variables.
Regardons ensuite un exemple spécifique de display:table-cell réalisant un centrage vertical :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.img{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height: 300px;
border: 1px solid lightgreen;
background-color: lightblue;
}
.text{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
border: 1px solid lightgreen;
padding: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div>
<div>
<img src="image/girl.jpg" width="80px" height="100px" alt="">
</div>
<div>
<p>php中文网在线免费教程 </p>
</div>
</div>
</body>
</html>display:table-cell réalisant un centrage vertical comme suit :
Remarque : 1. IE6/7 ne prend pas en charge l'attribut display:table-cell 2. table-cell ne prend pas en charge l'attribut margin (mais prend en charge le remplissage), qui est très rigide ; 3. Essayez de ne pas l'utiliser avec le flottement/le positionnement en même temps, car cela détruirait ses propriétés CSS.
Ce qui précède représente l'intégralité du contenu de cet article. Pour plus de connaissances sur l'attribut display:table-cell, vous pouvez vous référer au site Web php chinois manuel d'apprentissage 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!
Articles Liés
Voir plus- Exemples d'utilisation de l'attribut table-cell en CSS
- Un exemple d'introduction à la méthode de mise en page de l'image de gauche et du texte de droite en utilisant l'attribut table-cell de CSS
- Partagez la méthode d'implémentation de table-cell pour compléter la disposition de largeur fixe à gauche, largeur fixe à droite et largeur fixe à gauche et à droite.
- À propos de l'utilisation de l'attribut table-cell en CSS