需要一些帮助调整此文本

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列如此之大的原因是因为没有单元格具有声明的宽度，因此它使具有最宽数据的列具有更宽的列。这会导致其他单元格的宽度减小，并将它们更多地推到Title的右侧。标题全部左对齐，表格单元格也保持对齐。

编辑2 ：使用您的小提琴和指令，以下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;
}

Answer 2

我不确定您的目的是什么，但如果我理解您的问题，那么您希望标题与右侧对齐，并使您的内容在中心对齐。

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

只需将它们添加到jsfiddle的底部即可确保样式不会被覆盖。