需要一些幫助對齊此文本

我有一張標題，旁邊有三張照片和他們的標題，應該全部保留在原來的位置。

我有三個其他標題，作者，ISBN和年份，我需要移動到右側，表格下面的文本應該居中放置在下面。我試圖使用

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

但這集中了一切，有什麼建議？提前致謝。

這裏是我的jsfiddle：http://jsfiddle.net/2ep483ew/9/

這是它應該是什麼樣子。 enter image description here

來源

2014-09-19 MatthewTingle

你有沒有使用表格標題爲身體的THEAD標記和TBODY考慮？ – Mic1780 2014-09-19 21:22:43

像這樣？ #main table thead { text-align：right; } 似乎沒有工作：/ – MatthewTingle 2014-09-19 21:25:08

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

來源

2014-09-19 21:31:50 Mic1780

您是否看到我上傳的圖片？哦，我也不應該編輯HTML，它是給我們的，我們應該編輯CSS @ – MatthewTingle 2014-09-19 21:39:34

@MatthewTingle請參閱我的編輯部分。它描述了表格如何運作。 – Mic1780 2014-09-19 21:42:30

那麼我有沒有辦法用這種方式設置HTML？ – MatthewTingle 2014-09-19 21:44:12

我不完全確定你要做什麼，但是如果我理解你的問題，那麼你希望你的標題對齊到正確的位置，並且你的內容要在中心對齊。

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

只需將它們添加到jsfiddle的底部以確保樣式不會被覆蓋。

來源

2014-09-19 21:31:39 gaethofs

我想標題，書的標題留在原來的位置，實際上在這裏我希望它看起來像這樣http：//i.imgur。 com/rJCqPsa.jpg – MatthewTingle 2014-09-19 21:34:07

需要一些幫助對齊此文本

回答

相關問題