Comment aligner verticalement le contenu dans une division de taille fixe sur les navigateurs ?

Alignement vertical au sein d'une division définie

Question :

Comment aligner verticalement n'importe quel contenu dans un div avec une largeur et une hauteur spécifiées, garantissant l'uniformité entre les navigateurs et évitant les cellules de tableau solutions ?

Réponse :

Il existe plusieurs méthodes pour obtenir un alignement vertical dans ce scénario :

Version 1 : Div parent avec affichage as Table-Cell

Cette approche implique de définir la propriété d'affichage du div parent sur table-cell et d'aligner le contenu verticalement en utilisant vertical-align:middle.

Version 2 : Div parent avec bloc d'affichage et cellule de table d'affichage de contenu

Ici, le div parent est défini pour afficher le bloc , tandis que le div de contenu se voit attribuer une cellule de tableau d'affichage et l'alignement vertical est obtenu avec vertical-align: middle.

Version 3 : Div parent flottant et div de contenu comme cellule de tableau d'affichage

Dans cette méthode, le div parent flotte et le div de contenu est défini pour afficher la cellule de tableau avec un alignement vertical appliqué à l'aide de l'alignement vertical. : milieu.

Version 4 : Position de la division parent relative avec position du contenu absolue

Cette approche nécessite des calculs pour des implémentations spécifiques. Le div parent est positionné de manière relative et le div de contenu est positionné de manière absolue avec son sommet réglé à 50 %, sa hauteur à 50 % et sa marge supérieure calculée comme la moitié de la hauteur du div de contenu avec un signe négatif.

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!