代码之家 › 专栏 › 技术社区 › sarsnake

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

vertical-alignment css

sarsnake · 技术社区 · 14 年前

这里有很多ppl,所以之前已经问过这个问题,然后90%的人会给出这个教程 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

作为回答。但是,当在FF中以1280 x 1024 res的分辨率观看时,它并没有居中。更糟糕的是,它在IE7中崩溃得可怕。所以,这绝对不是答案。

解决方案必须适用于FF和IE 6/7

解决方案可以是任何可行的,尽管我有点纯粹,但我更喜欢div而不是table:)

http://www.codecookery.com/test/index.html

如你所见,这是一个幻灯片,需要居中。

3 回复 | 直到 14 年前

0b10011 Dragos. 13 年前

我相信这个解决方案就是你想要的。我没有访问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">

笔记:

图像将保持纵横比

-1

Samuel Neff 14 年前

如果一个固定高度的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>

-1

reisio 14 年前

这个 code here 不那么可怕捷克.

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前