Comment utiliser display:table-cell pour réaliser un centrage vertical ?-tutoriel CSS-php.cn

Comment utiliser display:table-cell pour réaliser un centrage vertical ?

不言

Libérer： 2018-10-24 15:26:25

original

5148 Les gens l'ont consulté

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>

Copier après la connexion

display:table-cell réalisant un centrage vertical comme suit :

Comment utiliser display:table-cell pour réaliser un centrage vertical ?

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!