Centrage vertical

Certains d'entre nous utilisent les tableaux pour profiter des avantages de ce système dont le centrage vertical.

En utilisant les cadres html (div et p), nous pouvons retrouver cet avantage de 2 façons (au moins ).

Première solution: donner des caractéristiques d'un tableau à un cadre en html.

<div style="width:10vw; height:10vw; border:0.1vh solid black; display:table-cell; vertical-align:middle; text-align:center; font-size:2vw;">contenu</div>

Seconde solution: donner aux lignes du texte une hauteur précise: pour une ligne centrée, la hauteur sera de la hauteur du cadre, pour deux lignes, la hauteur sera de moitié de la hauteur du cadre, etc...

<div style=width:10vw; height:10vw; border:0.1vh solid black; background:pink; text-align:center; line-height:10vw; font-size:2vw;">Contenu</div>

<div style="width:10vw; height:10vw; border:0.1vh solid black; translate(20vw, 2vh); background:pink; text-align:center; line-height:5vw; font-size:2vw;">deux lignes</div>

<div style="width:10vw; height:10vw; border:0.1vh solid black; transform:translate(20vw, 2vh); background:pink; text-align:center; line-height:3.3vw; font-size:2vw;">et avec trois lignes</div>