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

Question

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

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

Answer 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

Answer 2

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

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