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