在固定高度块垂直对齐图像(Vertical-align image in a fixed-heigh

2019-10-17 16:31发布

我试图底部固定高度块对齐的图像:

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

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

编辑补充:不能使用表格或背景图像。

非常感谢

Answer 1:

为什么你不能只是位置:相对分工,位置:绝对和乱用下/左属性?

或切换它的位置,内联块和玩耍。



Answer 2:

就像它的痛苦,我说这和在被分尸由纯粹主义者那里,最可靠的方式在一个普遍兼容的方式垂直对齐的东西的风险是使用一个表。

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 3:

要做到这一点最简单的方法是在DIV风格来使用=“背景:网址(...)不重复中心底部”,而不是IMG标签。



Answer 4:

我现在觉得不可阻挡,但我看到了一些定位元素在50%(顶部),然后给它的-50%的负顶边距。

只是明显的垂直对齐方式...



文章来源: Vertical-align image in a fixed-height block