#html #css
#HTML #css — код #css
Вопрос:
Я пытаюсь создать на своей странице всплывающий лайтбокс, который сжимается, чтобы соответствовать размеру элемента внутри него, и центрировать его на странице. До сих пор у меня есть:
.lightboxVariable{
display:block;
position: absolute;
top:0;
bottom: 0;
width : auto;
left:0;
right:0;
padding-left:10px;
padding-right:20px;
padding-top:10px;
padding-bottom:20px;
background:rgba(255,255,255,0.9);
border:black, thin;
box-shadow: 5px 5px 5px grey;
z-index:1000000;
overflow: auto;
text-align:center;
height:800px;
}
Теперь с помощью left:0; и right: 0; Элемент распространяется по всей странице (т. Е. Он игнорирует width:auto;), Но без них элемент просто располагается в левой части страницы.
Есть ли способ сделать и то, и другое, не прибегая к какому-то коду на основе js?
Комментарии:
1. Можете ли вы предоставить код на jsfiddle?
2. Попробуйте это: ширина: 100%; размер рамки: рамка;
3. Посмотрите, как это сделали ребята из Magnific Popup . Или, что еще лучше, используйте этот скрипт!
Ответ №1:
Вы могли бы попробовать следующее
width: auto;
height: auto;
top: 50%;
left: 50%;
// don't declare right or bottom
transform: translateX(-50%) translateY(-50%);
Он поместит левый край элемента в центр (слева: 50%;), А затем переместит его обратно влево (translateX (-50%)).
Аналогично для вертикального центра (top: 50%;) и (translateY (-50%)).
Комментарии:
1. Хороший материал. в дополнении… max-width и max-height могут быть хорошими свойствами для установки.
2. На самом деле, почти идеально — теперь он располагается вертикально по центру страницы, если нет прокрутки; но если страница прокручивается вниз, элемент больше не центрируется по вертикали.
3. Разобрался — позиция должна быть запущена, а не абсолютная