J'avais creusé la tête pour créer un alignement vertical en CSS en utilisant ce qui suit
.base{
background-color:green;
width:200px;
height:200px;
overflow:auto;
position:relative;
}
.vert-align{
padding-top:50%;
height:50%;
}
<!-- and used the following div structure. -->
<div class="base">
<div class="vert-align">
Content Here
</div>
</div>
Bien que cela semble fonctionner pour ce cas, j'ai été surpris de constater que lorsque j'augmentais ou diminuais la largeur de mon div de base, l'alignement vertical se cassait. Je m'attendais à ce que lorsque je définissais la propriété padding-top, cela prendrait le rembourrage en pourcentage de la hauteur du conteneur parent, qui est la base dans notre cas, mais la valeur ci-dessus de 50% est calculée en pourcentage de la largeur. :(
Existe-t-il un moyen de définir le rembourrage et / ou la marge en pourcentage de la hauteur, sans recourir à JavaScript?
top
fonctionne très bien pour le redimensionnement en fonction de la hauteur du navigateur / de la fenêtre. Que diriez-vous d'avoir un div en dessous de ce div? Comment pouvez-vousclear
le 2ème div être sous le div qui est décalé vers le bas par untop:50%
??