Отступ div внутри div

390

07 января 2017, 12:44

Когда хочу сделать отступ блоку logo, отступ делается внутри блока screen, а от него. Я знаю что можно сделать position: absolute; и отступ в процентах, но мне нужно в пикселях. Скажите, есть способ решить данную проблему?

Answer 1

Вариант №1:

.screen {
   position: relative;
   background-color: #222;
   height: 100vh;
   padding-top: 170px;
}
.logo {
   position: relative;
   margin: 0 auto;
   height: 86px;
   width: 340px;
   background: url("/img/logo.png");
}

Вариант №2:

.screen {
   position: relative;
   background-color: #222;
   height: 100vh;
}
.logo {
   position: relative;
   margin: 0 auto;
   padding-top: 170px;
   height: 86px;
   width: 340px;
   background-image: url("/img/logo.png");
   background-repeat: no-repeat;
   background-size: 100% 0;
   background-position-y: bottom;
}

Answer 2

Лучшее решение без явного указания размеров, которое я использую при верстке попапов, когда их нужно выровнять по вертикали, но их конечная высота неизвестна. Вот пример:

/* Обертка */
.screen:before {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle
}
/* Блок, который нужно выровнять */
.logo {
   display: inline-block;
   vertical-align: middle
}