Centered lightbox with dynamic height

Я работаю над лайтболом. Мне нужно, чтобы он был динамически разным по содержанию. Но мне также нужно, чтобы это было сосредоточено на экране. Я пытаюсь что-то вроде этого:Centered lightbox with dynamic height

HTML:

<div class="lightbox-background"> 
    <div class="lightbox"> 
     LIGHTBOX CONTENT 
    </div> 
</div>

CSS:

.lightbox-background { 
    background-color: rgba(0,0,0,0.9); 
    height: 100%; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 50; 
} 

.lightbox { 
    background-color: white; 
    width: 780px; 
    z-index: 100; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    height: auto !important; 
    max-height: 90%; 
}

я не мог заставить его работать. Я бы хотел избежать использования JS, если это возможно. Как мне это сделать?

источник

2013-11-04 Guto Marrara Marzagao

Вы можете работать с vertical-align: middle, а также с селектором :before на родительском контейнере. Проверьте мой скрипку:

http://jsfiddle.net/GA5K3/2/

источник

2013-11-04 17:22:55

Прошло некоторое время, пока я не понимаю, почему это работает. Спасибо за помощь. Вы также можете установить «font-size: 0;» к контейнеру и «font-size: 14px» к его дочернему элементу, чтобы удалить пробел между элементами встроенного блока. Если ваш контейнер слишком мал, дополнительное свободное пространство может привести к нецентральному результату. –

Лучший способ, которым я знаю, чтобы центрировать по вертикали с помощью CSS, - это абсолютное положение сверху 50%, а затем установить верхнее поле negitave на половину высоты элемента.

Поскольку вы не знаете высоту, вам придется использовать JS.

Возможно, у кого-то есть лучшая техника.

источник

2013-11-04 16:55:20 Ken

Centered lightbox with dynamic height

ответ

Смежные вопросы