Question

我已将vertical-align设置为text-top，除了顶行之外的所有内容都可以正常工作，因为某些原因这一行非常高。我已经尝试将该行设置为vertical-align: bottom !important，但问题仍然存在。当我使用chrome检查元素时，它会显示vertical-align: text-top划掉，但当我取消选中它时，会修复它。

以下是表格的HTML：

<table class="serviceTimes" style="width:100%;">
<tbody>
<tr>
<td style="vertical-align: bottom !important;"><h3>Sundays</h3></td>
</tr>
<tr>
<td style="width:25%; vertical-align:text-top;">
<h4>Praise &amp; Worship</h4>
<p>(Suite 200)
(w/ Kidz Klub @ 10:30 following the praise time in Suite 204)</p></td>
<td colspan="2" style="vertical-align:text-top;"><h4>10:30 AM &amp; 7 PM</h4></td>
<td><img src="http://www.harrisonswebsites.com/AmesFoursquareChurch/wp-content/uploads/2014/06/old_pocket_watch_short.jpg" alt="old_pocket_watch_short" width="278" height="267" class="alignright size-full wp-image-64" /></td>
</tr>
<tr>
<td><h3>Tuesdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Womens' Bible Study</h4>
<p>(1st &amp; 3rd week each month)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>1:00 PM</h4></td>
</tr>
<tr>
<td><h3>Wednesdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Bible Study</h4></td>
<td style="width:25%; vertical-align:text-top;"><h4>7:00 PM</h4></td>
</tr>
<tr>
<td><h3>Fridays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Power Hour</h4>
<p>(Praise &amp; Prayer)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>7:00 PM</h4></td>
</tr>
<tr>
<td><h3>Saturdays</h3></td>
</tr>
<tr>
<td style="width:25%;">
<h4>Men &amp; Women's Groups</h4>
<p>(2nd week each month)</p></td>
<td style="width:25%; vertical-align:text-top;"><h4>6:00 PM</h4></td>
</tr>
</tbody>
</table>

这是该表的css：

.serviceTimes td {
    border-top: 0px solid #ededed !important;
    padding: 0px 10px 0px 0px !important;
    vertical-align: text-top;
}
.serviceTimes tr {
    padding: 0px 0px 0px 0px !important;
}
.serviceTimes h3 {
    margin: 0px 0px !important;

可能导致这种情况的原因是什么？谢谢！

Answer 1

默认情况下，HTML表格行会拉伸到其内容的高度。因此，代码中的<img>标记会拉伸包含它的行的高度。要解决此问题，您可以尝试将position:absolute应用于<img>，以便其行不会像现在那样延伸。

垂直对齐为细胞增加高度？

1 个答案: