html - 需要一些帮助来对齐此文本

Question

我正在尝试在此处对齐主表格中的文本。

我有一个标题，其中包含三张图片和它们旁边的标题，它们应该都保持在它们所在的位置。

我还有其他三个标题，作者、ISBN 和年份，我需要将它们移到右侧，并且表格中它们下方的文本应在下方居中。我试着用

#main table td{ 
text-align: center; 
}

但这就是一切的中心，有什么建议吗？提前致谢。

这是我的 jsfiddle:http://jsfiddle.net/2ep483ew/9/

它应该是这样的。

Answer 1

我会使用 thead 和 tbody 标签，这样您就可以将表格标题和正文样式分开。最后，HTML 和 CSS 应该看起来像这样。

HTML

<div id="#main">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

#main table thead tr th:nth-child(2) {/*Keep your Title Heading (2nd th) left aligned*/
    text-align: left;
}
#main table thead tr th {
    text-align: right;
}
#main table tbody tr td {
    text-align: center;
}

编辑:提供的图片表明图片、标题、作者、ISBN 和年份在表中都有自己的列。图片上方没有标题文本，所有标题都左对齐。 Title 列如此大的原因是因为没有单元格具有已声明的宽度，因此它使具有最宽数据的列具有更宽的列。这会导致其他单元格的宽度变小，并将它们更多地推到标题的右侧。标题全部左对齐，表格单元格也左对齐。

编辑 2:使用您的 fiddle 和说明，以下 CSS 将使标题列后的单元格居中对齐。

CSS

#main table thead tr th:nth-child(n+3) {/*Center th tags after the 2nd element*/
    text-align: center;
}
#main table tbody tr td:nth-child(n+3) {/*Center td tags after the 2nd element*/
    text-align: center;
}