【问题标题】:IE7 vertically align middle - not workingIE7垂直对齐中间 - 不起作用
【发布时间】:2012-06-12 23:03:43
【问题描述】:

请在下面的链接中找到,

http://jsfiddle.net/anglimass/Y8AvM/

我只想让我的 div 也垂直对齐中间 ie7。

有人可以帮忙吗?

谢谢


对不起各位,

我找到了一个很好的解决方案 请看下面的链接,

http://jsfiddle.net/anglimass/ct4tx/

谢谢,

参考:http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/

【问题讨论】:

  • 难波这是我的客户要求。
  • @Somebodyisintrouble 很多人。在绝大多数企业环境中,仍然使用 IE7。有时甚至是IE6。我认识一些仍在运行 XP 的机器上工作的人。这真的一点也不罕见。企业没有不断升级到最新“最佳”技术的奢侈。

标签: html css


【解决方案1】:

它在 IE7 中不起作用,因为 IE7 does not support display: table-cell

我什至told you this before.

这是另一种在 IE7 中有效的垂直居中技术:How to vertically align an image inside div

这是应用到您的代码的上述答案中最简单的技术版本:http://jsfiddle.net/thirtydot/Y8AvM/1/

HTML:

<div class="inlay">
    <span class="helper"></span><img src="http://goldstudios.net/uploader/uploads/Wildebeest_$1$2ryes3hf$Fl0tEsFaORwBW2seye9qN0.jpg" />
</div>​

CSS:

html, body {
    height: 100%;
    background: #ddd;
}
.inlay {
    height: 100%;
    text-align: center;
}

.inlay img {
    vertical-align: middle;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

它适用于所有现代浏览器,当然还有 IE7。

【讨论】:

  • 哈哈,“我以前什至告诉过你。”
  • 谢谢,它适用于使用旧浏览器的特定项目:)
  • @CristianB.:很抱歉你必须在 2021 年使用 IE7,这太疯狂了。