Html 需要一些帮助来对齐此文本吗

我正在尝试将主表中的文本对齐

我有一个标题，上面有三张图片，它们的标题就在旁边，它们都应该保持原样

我还有另外三个标题，作者、ISBN和年份，我需要移到右边，表格中它们下面的文本应该居中。我试着用

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

但这就是一切，有什么建议吗？提前谢谢

这是我的JSFIDLE：

---

这是它应该是什么样子

我不太确定你的目的是什么，但如果我理解你的问题，那么你希望标题向右对齐，内容居中对齐

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

---

只需将它们添加到表格底部，以确保样式不会被覆盖。

我将使用

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>

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

编辑2：使用小提琴和指令，以下CSS将标题列后的单元格居中对齐

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;
}

#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;
}

---

您是否考虑过使用thead标记作为表格标题，而tbody标记作为正文？像这样吗#主表thead{text align:right；}似乎不起作用：/我希望书名和书名保持在原来的位置，实际上我希望它看起来像这样，那么你看到我上传的图片了吗？哦，还有，我不应该编辑HTML，它是给我们的，我们应该只编辑CSS@MatthewTingle请参阅我的编辑部分。它描述了表格是如何运行的。所以我没有办法用这种方式设置HTML吗？所以需要对齐的三件事是左边的标题列和右边的列需要居中？标题列根本不需要从我原来的小提琴中的原始位置更改，其他三列需要向右移动并居中