Question

请看一下 fiddle 。如何使th中的图像彼此对齐？图像下方的某些标题看起来太长并且将图像向上推了一点。我试过删除padding: 20px;并给它一个固定的高度但是失败了。有什么建议吗？

HTML

<table id="comparetable" class="blueshine">
<tr>
<td class="blank"></td>
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik iukiuk iukiu</th>                                       
<th><img class="thumbnail" src="image.jpg"><p>jhjhjhik</th>
<th><img class="thumbnail" src="image.jpg"><p>jhj isdoi idi93</th>
</tr>
<tr>
<td class="rowTitle">Price</td>                                                                                   <td>$4.5</td>
<td>$1.5</td>
<td>$3.5</td>                           
<td>$1.5</td>
</tr>
.....
</table>

CSS

/* START COMPARISON TABLE STYLES */
#comparetable {width: 100%; table-layout: fixed; text-align: center; margin: 4em 0; border-collapse: collapse; }
#comparetable tr {background: transparent!important;}
#comparetable td,
#comparetable th {padding: 20px; text-align: center;}
#comparetable td.rowTitle {text-align: left;}
.blank {background: none!important; border: none!important;}
.blueshine th {background-color: #b8cee2; font-size: 22px; color: #0c3053; text-align: center; font-weight: 600; text-shadow: 0 1px 0 #e0ecf7; border: 1px solid #9fb6c8; }    color: #222;
    font-size: 2em;
}

.thumbnail {width:80px;height:60px;}

Answer 1

th { vertical-align:top }

应该做的伎俩：JSFiddle Demo

Answer 2

最好添加第二行th：在第一行中添加图像（使用css规则vertical-align: top），在第二行中添加标题{{1}} css规则。

当您拥有不同高度的图像和/或具有不同高度的标题时，这将是最佳解决方案。

更多。如果你没有图像，标题将保持在同一行。

图像标题中的图像彼此对齐

2 个答案: