How to center the contents of an HTML table? – Dev

The best answers to the question “How to center the contents of an HTML table?” in the category Dev.

QUESTION:

I am using an HTML <table> and I want to align the text of <td> to the center in each cell.

How do I center align the text horizontally and vertically?

ANSWER:

The CSS to center text in your td elements is

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

ANSWER:

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.

ANSWER:

Try to put this in your CSS file.

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

ANSWER:

HTML in line styling example:

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

CSS file example:

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