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

发布于 2024-08-05 18:43:35 字数 254 浏览 4 评论 0原文

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

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

...适用于现代浏览器，IE 除外！毫无疑问，IE 很糟糕，但如果可能的话，我真的需要修复。

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

非常感谢

原文

I'm trying to BOTTOM align an image in a fixed-height block:

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

...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible.

Edited to add: Can't use tables or background image.

Many thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

远山浅 2024-08-12 18:43:35

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

或者将其位置切换为内联块并进行操作。

回复收藏 0 原文

故人的歌 2024-08-12 18:43:35

尽管我说起来很痛苦，并且冒着被纯粹主义者分成两半的风险，但以通用兼容的方式垂直对齐某些东西的最可靠方法是使用桌子。

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>

As much as it pains me to say it and at the risk of being drawn and quartered by the purists out there, the most reliable way to vertically align something in a universally compatible way is to use a table.

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>

回复收藏 0 原文