HTML：顶部对齐和图像细胞

Question

我需要创建一个表2个细胞的底部，这将被包含在TD标签内，像这样（或者2周的div没有关系。）：

<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标签的高度切换为800像素（样本＃2），则图像仍应正确对齐。

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

我还要提到的是，我不能硬编码的高度为表本身。表格的高度始终需要为父TD标签的100％，而且我可以手动调整高度值的唯一值在父TD中。

我该怎么做？哦，这也不重要，如果这是一个表或divs什么的。唯一需要在那里的是父TD标签。

最后，这是我目前的HTML。我的家长TD调整得很好，但是我的桌子的高度总是不超过我的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; }