当前位置：文江博客话题详情

在所有分辨率下将图像垂直居中

发布于 2024-08-31 20:22:50 字数 589 浏览 4 评论 0原文

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

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

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

该解决方案可以是任何可行的解决方案，尽管有点纯粹主义者，我更喜欢 div 而不是表格:)

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

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

原文

分享到QQ

分享到微博

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

发布评论

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

冰魂雪魄 2024-09-07 20:22:50

我相信这个解决方案就是您正在寻找的。我无法访问 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">

注意：

图像将保持宽高比

I believe this solution is what you're looking for. I don't have access to IE to test it (that's what I get for using Linux), but I'm fairly confident it works. And in regards to a div over a table, how about no wrapper at all? Not only that, but if the image is larger than the resolution of the monitor, it will scale down quite nicely. You can adjust the max-height and max-width if you want a little padding along the edges (for extremely large images and/or small resolutions).

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

And the HTML:

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

Notes:

Images will keep Aspect Ratio

回复收藏 0 原文

苯莒 2024-09-07 20:22:50

如果可以选择固定高度的 div，那么您可以使用前 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>

If a fixed-height div is an option then you can use position absolute with top 50% and then use a negative margin to position the div. I tested the following in FF3.6, IE6, IE8 and 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>

回复收藏 0 原文