3

我正在使用这个 CSS 来垂直居中一个精灵：

#content {
    width:750px;
    height:950px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-475px 0 0 -375px;
}

...当浏览器窗口的高度小于 950 像素时，我会丢失图像的顶部。当浏览器高度大于 950 像素时，如何将图像设置为垂直居中，但当它小于 950 像素时，图像的顶部保持固定，我只丢失了底部？

我已经在源代码中使用链接来根据屏幕大小在 css 样式表之间切换，例如：

<link rel="stylesheet" media="screen and (min-width:481px) and (max-width:800px)"
href="tablet.css" />

但据我了解，您不能根据浏览器高度切换样式表。

4

1 回答 1

2

将图像垂直居中（在示例中也是水平居中）的最简单方法可能是这种方法：

  • 只要屏幕大于图像，图像就会居中
  • 一旦图像变得比屏幕小，它就会放在顶部

希望这是您所期望的行为

演示

http://jsfiddle.net/uB3pW/

HTML

<div class="wrapper">
    <img class="sprite" src="http://lorempixel.com/output/nightlife-q-c-750-500-4.jpg" alt="">
</div>

CSS

* {
    margin:     0;
    padding:    0;
}

body, html {
    display:    table;
    width:      100%;
    height:     100%;
}

div.wrapper {
    display:    table-cell;
    position:   relative;
    top:        0px;
    left:       0px;
    width:      100%;
    height:     100%;
    background: #ccc;
    text-align: center;
    vertical-align: middle;
}

笔记

在 IE7 中不起作用。

于 2012-07-10T16:31:08.270 回答