Analyse d'exemple de méthode de centrage vertical de texte CSS et div

Dans la mise en page de style, nous rencontrons souvent le besoin de centrer les éléments. Il est relativement simple de réaliser un centrage horizontal des éléments via CSS : pour le texte, il vous suffit de définir text-align: center; pour son élément parent, et pour les éléments de niveau bloc tels que p, il vous suffit de définir les valeurs de marge. ​​​​de sa gauche et de sa droite sur auto. Pour réaliser un centrage vertical des éléments, certaines personnes penseront à l'attribut vertical-align en CSS, mais il ne prend effet que sur les éléments avec des attributs valign, tels que

, , , etc. dans les éléments de table. et les éléments comme

et n'ont pas l'attribut valign, donc l'utilisation de vertical-align ne fonctionnera pas sur eux. Par conséquent, nous devons utiliser d'autres méthodes pour réaliser le centrage vertical des éléments. Ci-dessous, j'ai résumé plusieurs méthodes de centrage vertical couramment utilisées.

Une seule ligne de texte est centrée verticalement

Pour une seule ligne de texte, il suffit de définir la hauteur de ligne du texte (line-height ) et la hauteur de la zone (height) pour être juste cohérent :

<!--html代码-->
    <p id="p1">
        这是单行文本垂直居中   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            height: 100px;   
            margin: 50px auto;   
            border: 1px solid red;   
            line-height: 100px; /*设置line-height与父级元素的height相等*/   
            text-align: center; /*设置文本水平居中*/   
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/   
        }

Plusieurs lignes de texte centrées verticalement

Lignes multiples Il existe deux situations pour le centrage vertical du texte. L'une est que la hauteur de l'élément parent n'est pas fixe et change avec le contenu. L'autre est que la hauteur de l'élément parent est fixe ; .

La hauteur de l'élément parent n'est pas fixe

Lorsque la hauteur de l'élément parent n'est pas fixe, la hauteur ne peut être étirée par le texte interne. De cette façon, nous pouvons faire apparaître le texte centré verticalement en définissant la valeur de padding. Il suffit de définir les valeurs de padding-top et padding-bottom pour qu'elles soient égales :

<!--html代码-->
    <p id="p1">
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中，   
            这是多行文本垂直居中。   
    </p>

/*css代码*/   
        #p1{   
            width: 300px;   
            margin: 50px auto;   
            border: 1px solid red;   
            text-align: center; /*设置文本水平居中*/   
            padding: 50px 20px;   
        }

<🎜. >

L'élément parent a une hauteur fixe

L'attribut vertical-align en CSS a été mentionné au début de cet article, mais il ne prend effet que sur les éléments avec l'attribut valign Combiné avec display: table;, p peut être. utilisé pour simuler l'attribut de table. Par conséquent, nous pouvons définir l'attribut d'affichage du parent p: display: table;; puis ajouter un p contenant du contenu textuel et définir son display: table-cell; et vertical-align: middle;. Le code spécifique est le suivant :

<!--html代码-->
    <p id="outer">
        <p id="middle">
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中，   
            这是固定高度多行文本垂直居中。   
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;      
        }

Cependant, l'effet d'affichage dans IE7 est la suivante :

Cela est dû au fait que les versions IE7 et inférieures ne prennent pas très bien en charge les attributs display:table et display:table-cell. Bien sûr, si vous ne le faites pas. Considérez les versions IE7 et inférieures. Pour les navigateurs, la méthode ci-dessus peut réaliser un centrage vertical. Si nous prenons en compte IE7 et versions antérieures, nous pouvons utiliser la connaissance des hacks CSS pour définir les propriétés de différents navigateurs.

<!--html代码-->
    <p id="outer">
        <p id="middle">
            <p id="content">
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)，   
                这是固定高度多行文本垂直居中(兼容IE7)。   
            </p>
        </p>
    </p>

/*css代码*/   
        #outer{   
            width: 400px;   
            height: 200px;   
            margin: 50px auto;   
            border: 1px solid red;   
            display: table;   
            *position:relative;  //兼容IE7及以下版本   
        }   
        #middle{    
            display:table-cell;    
            vertical-align:middle;     
            text-align: center; /*设置文本水平居中*/     
            width:100%;   
            *position:absolute;   //兼容IE7及以下版本   
            *top:50%;     
        }   
        #content {     
           *position:relative;  //兼容IE7及以下版本    
           *top:-50%;     
        }

Le sous-p est centré verticalement

Réglez le décalage en fonction de. la taille spécifique du sous-p

Si l'enfant p a une taille fixe, définissez le décalage horizontal et vertical à 50 % de l'élément parent, puis déplacez l'élément enfant vers le haut et vers l'arrière de la moitié de la taille selon la longueur réelle

<!--html代码-->
    <p id="outer">
        <p id="middle">
            子p(固定大小)垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
                background-color: #13CDF4;   
                width: 300px;   
                height: 200px;   
                position: relative;   
        }   
        #middle{    
                background-color: #E41627;   
                width: 100px;   
                height: 100px;   
                margin: auto;   
                position: absolute;   
                left: 50%;    
                top: 50%;   
                margin-left: -50px;   
                margin-top: -50px;   
        }

Cette méthode est compatible avec IE7 et IE6 , mais elle n'est valide que lorsque la taille du sub-p est fixe. La plupart du temps, la taille du sous-p n'est pas fixe. Ce qui suit décrit la méthode lorsque la taille du sous-p n'est pas fixe. Puisque l'effet d'affichage est fondamentalement le même que celui-ci, les rendus ne seront pas publiés un par un. Les lecteurs peuvent copier le code pour le vérifier par eux-mêmes.

2. Utilisez traduire

Après avoir décalé horizontalement et verticalement 50 % de l'élément parent dans la première méthode, ne définissez pas la valeur de marge, mais utilisez l'attribut transform dans CSS3 pour définir la valeur de traduction. , la partie du code CSS est modifiée comme suit :

#middle{    
        background-color: #E41627;   
        width: 100px;   
        height: 100px;   
        margin: auto;   
        position: absolute;   
        left: 50%;    
        top: 50%;   
        transform: translateX(-50%) translateY(-50%);   
        -webkit-transform: translateX(-50%) translateY(-50%);   
    }

Cette méthode doit faire attention au fait que la transformation est un attribut en CSS3. faites attention à la compatibilité du navigateur, les versions précédentes d'IE9 ne sont pas prises en charge.

3. Utiliser la mise en page absolue absolue

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用绝对定位实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            position: relative;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   //子p大小可随意设置   
            height: 100px;   
            margin: auto;   
            position: absolute;   
            top: 0;left: 0;right: 0;bottom: 0;   
        }

Cette méthode n'est pas compatible avec IE7 et IE6

4. Utilisez l'alignement vertical

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用vertical-align属性实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: table-cell;    
            vertical-align: middle;   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
            margin: 0 auto;   
        }

这种方法是将p转变成table-cell显示，然后通过vertical-align: middle;再设置其子元素垂直居中，这种方法和上面设置父级元素高度固定时多行文本居中的方法一样，所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6，可以参照上面的代码，上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的p垂直居中。这里我就不重述了。

5、利用display: flex

<!--html代码-->
    <p id="outer">
        <p id="middle">
            利用display: flex实现子p大小不固定垂直居中   
        </p>
    </p>

/*css代码*/   
        #outer{   
            background-color: #13CDF4;   
            width: 300px;   
            height: 200px;   
            display: flex;   
            justify-content: center;/*实现水平居中*/   
            align-items:center; /*实现垂直居中*/   
        }   
        #middle{    
            background-color: #E41627;   
            width: 100px;   
            height: 100px;   
        }

这种方法只需要在父级p中加上这三句话就行，但是在IE中兼容性不好，IE9及以下IE浏览器版本都不支持。

以上是我总结的一些常用到的垂直居中的设计方法，大家可以根据自己的需要选择合适的设计方式。

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!