固定高度块中的垂直对齐图像答案

【问题标题】：Vertical-align image in a fixed-height block固定高度块中的垂直对齐图像
【发布时间】：2010-12-01 11:54:12
【问题描述】：

我正在尝试 BOTTOM 对齐固定高度块中的图像：

div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }

...在现代浏览器中工作，除了 IE！难怪 IE 很烂，但如果可能的话，我真的需要一个修复程序。

编辑添加：不能使用表格或背景图片。

非常感谢

【问题讨论】：

图片的大小是一直不变的，还是动态的？

标签： css internet-explorer vertical-alignment

【解决方案1】：

尽管说起来让我很痛苦，并且冒着被纯粹主义者绘制和划分的风险，但以普遍兼容的方式垂直对齐某物的最可靠方法是使用表格。

table {
    float: left; 
    width: 100px; 
    height: 100px; 
    line-height: 100px;
}

<table cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="bottom"><img src="foo.jpg" /></td>
    </tr>
</table>

【讨论】：

不，谢谢，我已经知道该方法，但我不能将表格放在其他有效的 xhtml 严格布局中。

【解决方案2】：

最简单的方法是在 DIV style="background:url(...) no-repeat center bottom" 中使用而不是 IMG 标签。

【讨论】：

也知道这个方法，但是这里不能用背景图。

【解决方案3】：

你为什么不能只定位：相对于除法，定位：绝对和混淆底部/左侧属性？

或将其位置切换为内联块并播放。

【讨论】：

啊哈，我一般都是用这个方法，不知道为什么我没有想到这个。谢谢！ :-)
啊，现在上面的下拉菜单隐藏在这些图像后面。 Z-index 似乎没有任何效果。 :-(
查看一个示例有助于解决您的堆叠顺序难题。您可能没有考虑到有职位的父母，尽管很难在没有看到任何东西的情况下说出来。想象自己处于我的位置。

【解决方案4】：

我现在找不到它，但我看到一些东西将元素定位在 50%（顶部），然后给它一个负的上边距 -50%。

显然只是为了垂直对齐......

【讨论】：