Comment aligner le centre du texte dans la ligne du tableau html?

222

J'utilise un code HTML <table>et je souhaite aligner le texte de <td>au centre de chaque cellule.

Comment centrer le texte horizontalement et verticalement?

Rajagopal 웃
la source

Réponses:

323

Voici un exemple avec des styleattributs CSS et inline :

td 
{
    height: 50px; 
    width: 50px;
}

#cssTable td 
{
    text-align: center; 
    vertical-align: middle;
}
<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>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

http://jsfiddle.net/j2h3xo9k/

EDIT : l' valignattribut est déconseillé en HTML5 et ne doit pas être utilisé.

David Laberge
la source
1
N'est-ce pas vertical-align:middlecensé être appliqué à l' trélément?
posfan12
53

Le CSS pour centrer le texte dans vos tdéléments est

td {
  text-align: center;
  vertical-align: middle;
}
Carsten
la source
29

Essayez de mettre cela dans votre fichier CSS.

td {
    text-align: center;
    vertical-align: middle;
}
Boris
la source
25

exemple en ligne de la main longue:

<td style='text-align:center;vertical-align:middle'></td> 

exemple de raccourci css:

td{
 text-align:center;
 vertical-align:middle;
}
Hayden Thring
la source
5

<td align="center" valign="center">textgoeshere</td>

Est la seule réponse correcte à mon humble avis, car votre travail avec les tableaux est l'ancienne fonctionnalité la plus couramment utilisée pour le formatage des e-mails. Donc, votre meilleur pari est de ne pas utiliser uniquement le style, mais le style en ligne et les balises de table connues.

Rémi
la source
5
valignest déconseillé en HTML5. Ne l'utilise pas. Pour le formatage des e-mails, une stylebalise ou un styleattribut en ligne serait la meilleure solution.
Sean the Bean
1

Sélecteur> enfant:

.text-center-row>th,
.text-center-row>td {
  text-align: center;
}
<table border="1" width='500px'>
  <tr class="text-center-row">
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
  <tr class="text-center-row">
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

Fernando
la source
-1

<td align="center"valign="center">textgoeshere</td>

plus sur valign

Balaswamy Vaddeman
la source
12
L'attribut valign n'est pas pris en charge dans HTML5. Utilisez plutôt CSS.
T30