需要一些帮助对齐此文本

我有一张标题，旁边有三张照片和他们的标题，应该全部保留在原来的位置。

我有三个其他标题，作者，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

需要一些帮助对齐此文本

回答

相关问题