Comment centrer le texte horizontalement et verticalement dans un tableau HTML ?

Alignement du texte dans un tableau HTML horizontalement et verticalement

Dans un tableau HTML, centrer le texte dans chaque cellule, horizontalement et verticalement, peut améliorer la présentation et la lisibilité de vos données. Voici un guide détaillé pour y parvenir :

Alignement horizontal

Pour centrer le texte horizontalement, utilisez la propriété CSS text-align. Ajouter text-align: center; à l'attribut style de l'attribut éléments. Cela alignera le texte au centre de chaque cellule.

Alignement vertical

Pour l'alignement vertical, appliquez la propriété CSS vertical-align. Définir l'alignement vertical : milieu ; pour garantir que le texte est centré verticalement dans les cellules. Cette propriété devra peut-être être ajustée en fonction de la hauteur des cellules.

Exemple avec le style en ligne

Vous pouvez utiliser des styles en ligne dans le tableau pour appliquer ces alignements :

<code class="html"><table border="1">
  <tr>
    <td style="text-align: center; vertical-align: middle;">Text</td>
    <td style="text-align: center; vertical-align: middle;">Text</td>
  </tr>
</table></code>

Exemple avec classe CSS

Alternativement, vous pouvez créer une classe CSS pour appliquer les alignements :

<code class="css">.center-text {
  text-align: center;
  vertical-align: middle;
}</code>

Et l'utiliser dans le tableau :

<code class="html"><table border="1">
  <tr>
    <td class="center-text">Text</td>
    <td class="center-text">Text</td>
  </tr>
</table></code>

N'oubliez pas que la hauteur et la largeur spécifiées des cellules peuvent affecter l'alignement vertical. Ajustez les valeurs si nécessaire pour obtenir le résultat souhaité.

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!