左对齐 tds 中的居中文本答案

【问题标题】：Left justify centered text in tds左对齐 tds 中的居中文本
【发布时间】：2018-11-30 06:46:01
【问题描述】：

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

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

【问题讨论】：

您是否尝试实现这一目标？ stackoverflow.com/questions/8702802/…
我只能使用表格，所以 div 只对我不起作用，谢谢
文本如何居中和左对齐？
@DavidThomas 他的意思是文本块居中，里面的文本左对齐。
@Digitalfortress 你可以在表格中使用 div 吗？如果是这样，您可以将 div 居中并保持内部文本左对齐。

标签： html css html-table

【解决方案1】：

您可以将文本包含在 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。默认左对齐。

【讨论】：

【解决方案2】：

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

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

JS Fiddle demo.

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

请记住，填充将添加到单元格的width，因此，在上述情况下，单元格的尺寸将为width + padding-left + padding-right + border-left + border-right，所以：（7em + 1em + 1em + 1px + 1px）。要在定义的width 中包含padding 和borders ，您可以在兼容的浏览器中使用box-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 Fiddle demo.

【讨论】：

这是一个很好的实现方式，但是如果表格宽度为100%，并且随着屏幕分辨率的增加，文本不会在表格中居中，对吧？
我不知道表格宽度，它设置为 100%，所以每次屏幕尺寸变化时，表格宽度都会改变，我需要确保它始终居中
这将在单元格内居中。如果您的表格或单元格有限制，请将其添加到问题中。并清楚地解释，如果它们有帮助，请显示图像。实际上，我不明白您在评论中要问什么：table 的大小与td 中的文本居中无关。如果单元格太小可能不清晰，但浏览器仍会尽力在 CSS 的约束范围内适当地定位它。