HTML：在单元格的顶部和底部对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13072972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: align images at top and bottom of cells
提问by goalie35
I need to create a table with 2 cells (or 2 divs. Doesn't matter), which will be contained within a TD tag, like this:
我需要创建一个包含 2 个单元格（或 2 个 div。无关紧要）的表格，该表格将包含在 TD 标签中，如下所示：
<td style="height:200px;">
<table>
<tr>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
</td>
Each cell will contain 1 image (see image below). My problem however, is the image in the top cell always needs to be at the very top and the image in the bottom cell always needs to be at the very bottom, irregardless of the height of the parent TD tag. So in the example below, lets say sample #1's parent TD tag is 200px height. The images align to the very top and bottom of their cells. If I switch the height of the TD tag to 800px (Sample #2), then the images should still align properly.
每个单元格将包含 1 张图像（见下图）。然而，我的问题是顶部单元格中的图像始终需要位于最顶部，而底部单元格中的图像始终需要位于最底部，无论父 TD 标签的高度如何。因此，在下面的示例中，假设示例 #1 的父 TD 标签的高度为 200 像素。图像与其单元格的顶部和底部对齐。如果我将 TD 标签的高度切换为 800 像素（示例 #2），那么图像仍应正确对齐。
alignment sample http://functionalevaluations.com/images/imagealignment.jpg
对齐示例 http://functionalevaluations.com/images/imagealignment.jpg
I should also mention that I can't hardcode a height into the table itself. The height of the table will always need to be 100% of the parent TD tag and the only value where I can manually adjust the height value is in the parent TD.
我还应该提到我不能将高度硬编码到表格本身中。表格的高度始终需要是父 TD 标签的 100%，我可以手动调整高度值的唯一值是在父 TD 中。
How can I do this? Oh, also it doesn't matter if this is a table or divs or whatever. The only thing that needs to be there is the parent TD tag.
我怎样才能做到这一点？哦，这也没关系，这是一张桌子还是 div 或其他什么。唯一需要存在的是父 TD 标签。
Finally, here's my current HTML. My parent TD adjusts fine, however the height of my table is always no more than the height of my 2 images. I can't seem to get it to be the same height of the parent 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>
回答by Zoltan Toth
Try this - DEMO
试试这个 -演示
HTML
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
CSS
img {
display: block;
margin: auto;
}
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
