HTML：对齐单元格顶部和底部的图像

我需要创建一个包含2个单元格（或2个div.无关紧要）的表，它将包含在TD标记中，如下所示：

<td style="height:200px;">
    <table>
         <tr>
              <td>Top Cell</td>                  
         </tr>
         <tr>
              <td>Bottom Cell</td>
         </tr>
    </table>
</td>

顶细胞
底部单元格

每个单元格将包含一个图像（见下图）。然而，我的问题是，顶部单元格中的图像始终需要位于最顶部，底部单元格中的图像始终需要位于最底部，与父TD标签的高度无关。因此，在下面的示例中，假设sample#1的父TD标记的高度为200px。图像与单元格的顶部和底部对齐。如果我将TD标签的高度切换到800px（示例2），则图像仍应正确对齐

我还应该提到，我不能将高度硬编码到桌子本身。表的高度始终需要是父TD标记的100%，并且我可以手动调整高度值的唯一值是在父TD中

我该怎么做？哦，不管这是一张桌子还是一张沙发或其他什么东西。唯一需要的是父TD标签

最后，这里是我当前的HTML。我的父母TD调整得很好，但是我的桌子的高度始终不超过我的两张图片的高度。我似乎无法让它与父母的TD一样高：

   <td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
        <table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
            <tr>
                <td valign="top" style="height:50%;">

                        <img src='includes/images/itemImages/TopImage.jpg' border="0" 
                            style="vertical-align: top">
                </td>
            </tr>
            <tr>
                <td valign="bottom" style="height:50%;">
                    <img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
                </td>
            </tr>
        </table>

    </td>

试试这个-

HTML

试试这个-

HTML

---

添加文本对齐：中心到中心图像。边距：自动；“你应该做到这一点，不是吗？”巴里查普曼说，“是的。”。。它不会影响单元格的其他部分，因为这些内容可能需要与不同的库对齐，但这不起作用。我的桌子的高度仍然没有增加到比图片更大的程度。我的父TD正确放大，但我的表仍然保持不变。很抱歉，您的代码中缺少一个值。是的，这奏效了！谢谢。添加文本对齐：中心到中心图像。边距：自动；“你应该做到这一点，不是吗？”巴里查普曼说，“是的。”。。它不会影响单元格的其他部分，因为这些内容可能需要与不同的库对齐，但这不起作用。我的桌子的高度仍然没有增加到比图片更大的程度。我的父TD正确放大，但我的表仍然保持不变。很抱歉，您的代码中缺少一个值。是的，这奏效了！谢谢

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td class="top">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
    <tr>
        <td class="bottom">
            <img src='http://lorempixel.com/100/100' />
        </td>
    </tr>
</table>

img {
    display: block;
    margin: auto;
}

.top { vertical-align: top; }
.bottom { vertical-align: bottom; }