0

对于所有常见的分辨率，我需要能够垂直居中图像。SO上的很多人之前已经问过这个问题，然后90％的人给出了这个教程 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

作为答案。但是，当我在 FF 中使用 1280 x 1024 分辨率的显示器查看时，它没有居中。更糟糕的是，它在 IE7 中严重崩溃。所以，这绝对不是答案。

我在追逐不可能的梦想吗？该解决方案必须适用于 FF 和 IE 6/7

解决方案可以是任何可行的方法，虽然有点纯粹主义者，但我更喜欢 div 而不是 table:)

特别是我需要这个网站 http://www.codecookery.com/test/index.html

如您所见，这是一个幻灯片，需要居中。

4

3 回答 3

2

我相信这个解决方案就是您正在寻找的。我无法访问 IE 来测试它（这就是我使用 Linux 所得到的），但我相当有信心它可以工作。关于表格上的 div，根本没有包装器怎么样？不仅如此，如果图像大于显示器的分辨率，它会很好地缩小。如果您想要沿边缘进行一点填充（对于非常大的图像和/或小分辨率），您可以调整最大高度和最大宽度。

CSS：

<style>

/* Positioning */
.absoluteCenter {
 margin:auto; /* Required */
 position:absolute; /* Required */
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */
}

/* Sizing */
.absoluteCenter { /* Fallback */
 max-height:100%;
 max-width:100%;
}

</style>

和 HTML：

<img class="absoluteCenter" src="PATHTOIMAGE">

笔记：

  • 图像将保持纵横比
于 2011-06-09T16:17:12.943 回答
-1

如果固定高度的 div 是一个选项，那么您可以使用 top 50% 的绝对位置，然后使用负边距来定位 div。我在 FF3.6、IE6、IE8 和 Chrome 中测试了以下内容。

<html>
<head>
  <style>
    #vertCenter {
        height: 400px; 
        position: absolute; 
        top: 50%; 
        margin-top: -200px;
        border: 1px green solid;
    }
  </style>
</head>

<body>
  <div id="vertCenter">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
  </div>
</body>
</html>
于 2010-05-06T01:12:34.343 回答
-1

这里的代码没有 jakpsatweb.cz 可怕。

于 2010-05-06T01:15:15.323 回答