css - How to center the contents of an HTML table?

ID : 10338

viewed : 41

Tags : htmlcsshtml-tablehtml

Top 5 Answer for css - How to center the contents of an HTML table?

vote vote

91

Here is an example with CSS and inline style attributes:

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: The valign attribute is deprecated in HTML5 and should not be used.

vote vote

81

The CSS to center text in your td elements is

td {   text-align: center;   vertical-align: middle; } 
vote vote

78

HTML in line styling example:

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

CSS file example:

td {     text-align: center;     vertical-align: middle; } 
vote vote

68

Try to put this in your CSS file.

td {     text-align: center;     vertical-align: middle; } 
vote vote

52

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

Is the only correct answer imho, since your working with tables which is old functionality most common used for e-mail formatting. So your best bet is to not use just style but inline style and known table tags.

Top 3 video Explaining css - How to center the contents of an HTML table?

Related QUESTION?