Explication détaillée de l'implémentation CSS du centrage vertical dans un div avec une largeur et une hauteur fixes. Exemple de partage.

Cet article présente principalement l'exemple détaillé du centrage vertical CSS dans une largeur et une hauteur p fixes, c'est-à-dire la méthode de centrage vertical des éléments à l'intérieur de p par rapport à p. Les amis dans le besoin peuvent s'y référer

. Cas d'exigence

Le cas est comme ceci. La hauteur et la largeur d'un p extérieur sont fixes, mais le contenu à l'intérieur n'est pas fixe. Ce que font de nombreux amis, c'est ajouter un remplissage ou une marge à l'en-tête, de sorte que le contenu à l'intérieur semble centré. Cependant, si le contenu change, le remplissage ou la marge fixe de l'en-tête ne changera jamais. De ce fait, la direction verticale ne sera pas centrée !

Nous savons que si le style p

<p class="outer"><p class="inner">haorooms内部内容</p></p>

suivant est comme ça

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

alignement vertical :middle ne fonctionne pas. Beaucoup d'amis font toute une histoire à propos de .inner, en ajoutant de la marge, etc. comme je l'ai dit plus haut ! Alors, existe-t-il une meilleure solution à cette situation ?

Solution

Idée : ajoutez un cssHack, définissez la hauteur de ligne de cssHack égale à la hauteur du p externe, et vous pouvez utiliser vertical-align:middle !

p est le suivant :

<p class="outer">   
    <p class="inner">haorooms内部内容</p><p class="v">cssHack</p>   
</p>

Le style est le suivant :

* {   
    margin: 0;   
    padding: 0;   
}   
.outer {   
    background-color: #ccc;   
    font-size: 24px;   
    height: 350px;   
    text-align: center;   
    overflow: hidden;   
    width: 280px;   
}   
.outer  .inner,   
.outer  .v {   
    display: inline-block;   
    zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}   
.outer  .inner {               
    line-height: 1.8;   
    padding: 0 4px 0 5px;   
    vertical-align: middle;   
    width: 262px;              
}   
.outer  .v {   
    line-height: 350px;   
    text-indent:-9999px;   
    width: 1px;            
}

De cette façon , la verticalité à l'intérieur de p est atteinte Centrée !

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!