需要一些對齊此文本的幫助

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和年份在表中都有它們自己的列。 圖像上方沒有標題文本，並且所有標題均保持對齊。 “標題”列之所以如此之大，是因為沒有一個單元格具有聲明的寬度，因此它使數據最寬的列具有更寬的列。 這將導致其他單元格的寬度較小，並將它們推向標題的右側。 標題全部左對齊，表格單元格也左對齊。

編輯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的底部添加它們，以確保樣式不會被覆蓋。