У меня есть следующий 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;
}
Чтобы изображение всегда было в горизонтальном центре, я просто использую text-align: center на обертке div, поэтому я на 100% уверен, что он будет прав.
Я столкнулся с проблемами с вертикальным центрированием, и я использую обходное решение, просто устанавливающее верхнее значение в свойствах #lightbox.
Как вы можете видеть, высота изображения известна, поэтому это легко сделать в jQuery, но я ищу чистое решение CSS.
Любые идеи? Спасибо.