左对齐在tds中居中文本

Question

我有一个报告显示在一个表格中，tds中的文字必须居中但是左对齐，我该如何实现？

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

Answer 1

如果您无法修改加价，我建议的唯一选择是使用padding：

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

JS Fiddle demo

这将使文本1em远离单元格的左右边界，但在这些边界内保留左对齐。

请记住，填充已添加到单元格的width，因此上面的单元格尺寸为width + {{1} } + padding-left + padding-right + border-left，所以：（border-right）。要在 }中包含7em + 1em + 1em + 1px + 1px和padding ，您可以在兼容的浏览器中使用border：

width

JS Fiddle demo

Answer 2

您可以在div中包含文字，并将其置于td中，如下所示：

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

您不必在div中指定align=left。它默认为左对齐。