Question

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

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

...适用于IE以外的现代浏览器！ IE难怪，但如果可能，我真的需要修复。

编辑添加：无法使用表格或背景图片。

非常感谢

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

Answer 2

最简单的方法是在DIV style =“background：url（...）no-repeat center bottom”中使用，而不是IMG标记。

Answer 3

为什么你不能只定位：相对分区，位置：绝对和底部/左侧属性混乱？

或者将它的位置切换到内联块并播放。

Answer 4

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

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

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

4 个答案: