Задача для верстальщиков. Выравнивание по вертикали

Вопрос в корне изменился, поэтому я изменяю текст вопроса.
Почему не работает padding-top: 50%;
Посмотреть и по редактировать можно вот здесь
При таком вертикальном выравнивании происходит следующее, чем меньше ширина клиентской области (окна), тем выше находится элемент и наоборот. В чём проблема.
  • Вопрос задан
  • 4010 просмотров
Решения вопроса 1
Prilepsky
@Prilepsky
Программист 1C
Пригласить эксперта
Ответы на вопрос 6
Webdesus
@Webdesus
Задайте height в 100% и все будет ок.)))
body {background: #2c3e50;}
div {
    height:100%;
  padding-top: calc(50% - 25px);
  height: 50px;
  width: 50px;
  margin: 0 auto;
}
Ответ написан
Хмм, а так не работает разве?
div {
    width: 50px;
    height: 50px;
    position:relative;
    margin-top: 50%;
    top:-25px;
}
Ответ написан
Самый распространенный способ выравнить блог по вертикали - сделать примерно такое:
div {
    width: 50px;
    height: 50px;
    position:relative;
    margin-top: -25px;
    top: 50%;;
}

Так же работает и с выравниванием по горизонтали:
div {
    width: 50px;
    height: 50px;
    position:relative;
    margin-top: -25px;
    top: 50%;
    left: 50%;
    margin-left: -25px;
}


Можно ещё указать родителю что-то вроде: display: table-cell, а дочернему vertical-align: middle;

Ещё есть крутая штука - flexbox. Пока что этот стандарт не утвержден w3c, но в хроме и опера работает и в поздних версиях лисы. Тут вообще все элементарно:
div {
     margin: auto;
}

Блок центруется идеально по центру и по горизонтали и по вертикали. Но я бы не советовал пока что использовать флекс, тк, его синтаксис часто меняется. Но моё мнение, что за флексом лежит будущее :)
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
padding-top считается по ширине (если задан в относительных еденицах) так же как padding-left по высоте. Это к слову единственный способ сделать резиновые примитивы (квадраты, круги, прямоугольники).
Ответ написан
Webdesus
@Webdesus
Все прекрасно вообщем работает. Не работает лишь в jsfiddle потому что там выполнение происходит во фрайме. Перейдите по ссылке которая в фрейме указано и увидите что все прекрасно работает.
Ответ написан
Webdesus
@Webdesus
Вам нужно клинская область? если да то поставьте
position: fixed;
top: 50%;

И ни мучайтесь более.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы