À l'ère de la disposition des tableaux, il n'est pas nécessaire de trop penser au centrage vertical. Dans les cellules, la valeur par défaut est le centrage vertical. Une ligne de texte est centrée verticalement, et trois lignes de texte seront également centrées verticalement. Effectuez la mise en page de la page Web CSS afin que le formulaire soit modifié. Le texte est positionné par défaut en haut du conteneur.
Comme indiqué ci-dessous :
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <tête> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #M.Jin { largeur : 500 px ; hauteur : 200 px ; bordure : 1px solide #03c ; texte-align:centre; } </style> </tête> <corps> <div id="MrJin"><a href="http://www.52CSS.com/">Conception Web CSS</a></div> </corps> </html> |
Dans ce cas, comment centrer verticalement le texte ? Divisé en trois situations :
1. S'il s'agit d'une seule ligne de texte, vous pouvez utiliser l'espacement des lignes pour résoudre le problème.
Nous y ajoutons la définition de l’espacement des lignes pour obtenir l’effet de centrer verticalement une seule ligne de texte.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <tête> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #M.Jin { largeur : 500 px ; hauteur : 200 px ; bordure : 1px solide #03c ; texte-align:centre; hauteur de ligne : 200 px ; } </style> </tête> <corps> <div id="MrJin"><a href="http://www.52CSS.com/">Conception Web CSS </a></div> </corps> </html> |
2. S'il s'agit d'un texte multiligne, le conteneur parent n'a pas de hauteur fixe.
Nous pouvons utiliser du rembourrage pour résoudre le problème.
Définissez le remplissage du conteneur sur la même valeur fixe et la hauteur du conteneur augmente à mesure que le contenu augmente.
Utilisez-le pour réaliser le centrage vertical du texte multiligne.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <tête> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titre>www.52CSS.com</titre> <style type="text/css"> #M.Jin { largeur : 500 px ; remplissage : 50px 0 ; bordure : 1px solide #03c ; texte-align:centre; } </style> </tête> <corps> <div id="MrJin"><p><a href="http://www.52CSS.com/">Conception Web CSS </p><p>Nous nous engageons à alimenter les sites Web chinois ! </a></p></div> </corps> </html> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <tête> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>chinaz.com</title> <style type="text/css"> #M.Jin { largeur : 500 px ; remplissage : 50px 0 ; bordure : 1px solide #03c ; texte-align:centre; } </style> </tête> <corps> <div id="MrJin"><a href="http://www.52CSS.com/"> <p>Conception Web CSS</p> <p>Site des webmasters chinois</p> <p>Nous nous engageons à alimenter les sites Web chinois ! </p> </a></div> </corps> </html> |