在单元格中心对齐内容，但保持文本左对齐答案

【问题标题】：Align content within center of cell but keep left alignment of text在单元格中心对齐内容，但保持文本左对齐
【发布时间】：2012-10-03 05:05:10
【问题描述】：

我正在寻找一些 html 帮助。我将如何在单元格内集中移动文本块，同时保持它们的对齐不变。我不希望文本全部居中显示，因为我将使用无序列表。我只是希望将文本块移到单元格的中心。

当前场景示例： http://jsfiddle.net/AygnN/

【问题讨论】：

你想要什么居中？ h1、ul、一切？
我希望 ul 块位于单元格的中间，其文本左对齐。

标签： html

【解决方案1】：

<table id="sub-content" style="width: 100%;">
  <tbody>
    <tr>
      <th>Departments</th>
      <th>KPI Types</th>
      <th>Bonus</th>
    </tr>
    <tr>
      <td>
        <ul>
          <li>dfgsdgfdfg</li>
        </ul>
      </td>
      <td>
        <ul>
          <li>sdfgsdfgsdfg</li>  
        </ul>
      </td>
      <td>
        <ul>
          <li>sdgsdfgsdffgsdgf</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

如果您将<h1> 标记作为列标题，则应使用实际的表标题（<th> 标记）。现在，在 CSS 中你可以说：

th { text-align:center; }

编辑：

#sub-content td{ padding:0px 60px; }

所有表格标题都将居中，而表格中的所有列表都将向左对齐。

这种方法更标准。

JSFiddle

【讨论】：

我实际上希望 ul 内容在 td 单元格内居中，但同时保持其左对齐不变。目前 ul 元素向左对齐，但它们都位于单元格的左侧，使页面看起来偏向一边。我可以将 ul 元素居中，但它们会失去左对齐块性
大声笑。你不想要对齐，你想要填充。如果列表的项目符号在左侧对齐，那么什么决定了中心？更新了做填充的帖子，并添加了一个小提琴。

【解决方案2】：

您可以将文本放在 div 中，并将 div 托管在表格单元格中。文本将遵循 div 中指定的 css 样式，因为 div 本身将位于单元格的中心。

你给出的例子做了同样的事情。而是将单元格划分为多个单元格并将文本放在中间。

【讨论】：