html - 左对齐 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 小提琴演示。

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

但是请记住，填充将添加到width单元格的 中，因此在上述情况下，单元格的尺寸将为width+ padding-left+ padding-right+ border-left+ border-right，因此：( 7em + 1em + 1em + 1px + 1px)。要在定义中包含paddingand border，您可以在兼容的浏览器中使用：widthbox-sizing

 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 小提琴演示。

Answer 2

您可以将文本包含在 a 中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 演示

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