Center text in table cell

Jack Stevens picture Jack Stevens · Oct 3, 2011 · Viewed 149.6k times · Source

I can't seem to find the answer to my issue. I have a table with two rows and two columns (like the code shown below), how do I center align the text in specific cells. I would like to center align the text in one or two of the cells - not all the cells.

<div style="text-align: center;">
    <table style="margin: 0px auto;" border="0">
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
            <tr>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</div>

Answer

Cᴏʀʏ picture Cᴏʀʏ · Oct 3, 2011

I would recommend using CSS for this. You should create a CSS rule to enforce the centering, for example:

.ui-helper-center {
    text-align: center;
}

And then add the ui-helper-center class to the table cells for which you wish to control the alignment:

<td class="ui-helper-center">Content</td>

EDIT: Since this answer was accepted, I felt obligated to edit out the parts that caused a flame-war in the comments, and to not promote poor and outdated practices.

See Gabe's answer for how to include the CSS rule into your page.