Left justify centered text in tds

Question

我有一个显示在表格中的报告，tds内的文本必须居中，但必须对齐，如何才能做到这一点？

<td style="text-align: center;"><?=$row['column']?></td>

Answer 1

If you're unable to modify the mark-up, the only option I can suggest is to use padding :

 td {
    width: 7em;
    padding: 0 1em;
    border: 1px solid #000;
 }

JS Fiddle demo .

This will place the text 1em away from the left and right boundaries of the cell, but retain left-justification within those boundaries.

Remember that padding will be added to the width of the cell, though, so with the above the dimensions of the cell will be width + padding-left + padding-right + border-left + border-right , so: ( 7em + 1em + 1em + 1px + 1px ). To contain the padding and border s within the defined width you can use box-sizing in compliant browsers:

 td {
    width: 7em;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1em;
    border: 1px solid #000;
 }

JS Fiddle demo .

Answer 2

You can contain the text in a div and center it in the td like this:

HTML

<td><div class="inner">left justified text in a centered block</div></td>

CSS

.inner {
    width: 20%;
    display: table;
    margin: 0 auto;
}

JSFiddle Demo

You don't have to specify align=left in the div. It is aligned left by default.