49

一種のライトボックス プロジェクト用に次の HTML があります。

<div id="lightbox">
  <img id="image" src="" />
</div>

次の CSS を使用しています。

#lightbox{
display:none;
position:fixed;
width:100%;
text-align:center;
z-index:600;
cursor:pointer;
left:0;
top:100px;
}

#image{
position:relative;
height:600px;
border:1px solid grey;
}

画像を常に水平方向の中央に配置するには、ラッパー div で text-align:center を使用するだけなので、100% 正しいと確信しています。

垂直方向の中央揃えの問題に直面しており、#lightbox プロパティで単純に上位の値を設定するという回避策を使用しています。

ご覧のとおり、画像の高さはわかっているため、jQuery で簡単に実行できますが、純粋な CSS ソリューションを探しています。

何か案は？ありがとう。

4

8 に答える 8

22

または、これを試すこともできます (画像の高さがわかっている場合にのみ機能します)。

#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}
于 2013-01-29T13:11:41.473 に答える
-1

アイテムを垂直方向に中央揃えするには、次の 2 つの css 属性が必要です。

display:table-cell;
vertical-align:middle;

例: http://jsfiddle.net/yjv94/

于 2013-01-29T13:04:47.587 に答える