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

Question

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

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

每个单元格将包含 1 张图片(见下图)。然而，我的问题是，无论父 TD 标签的高度如何，顶部单元格中的图像始终需要位于最顶部，而底部单元格中的图像始终需要位于最底部。所以在下面的例子中，假设样本 #1 的父 TD 标签是 200px 高度。图像与其单元格的顶部和底部对齐。如果我将 TD 标签的高度切换为 800px(示例 #2)，那么图像仍应正确对齐。

alignment sample http://functionalevaluations.com/images/imagealignment.jpg

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

我该怎么做？哦，如果这是一个表或 div 或其他什么也没关系。唯一需要的是父 TD 标签。

最后，这是我当前的 HTML。我的 parent TD 调整得很好，但是我的 table 的高度总是不超过我的 2 张图像的高度。我似乎无法让它与父 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>

Answer 1

试试这个 - DEMO

HTML

<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>

CSS

img {
    display: block;
    margin: auto;
}

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