3

このCSSを使用して、スプライトを垂直方向に中央揃えにします。

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

...ブラウザウィンドウの高さが950px未満の場合、画像の上部が失われます。ブラウザの高さが950pxを超える場合、画像を垂直方向に中央に配置するにはどうすればよいですか。それより低い場合、画像の上部は固定されたままで、下部のみが失われます。

私はすでにソースコードのリンクを使用して、次のような画面サイズに基づいて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 に答える