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

Question

[Иван Желудков]

Вопрос в корне изменился, поэтому я изменяю текст вопроса.
Почему не работает padding-top: 50%;
Посмотреть и по редактировать можно вот здесь
При таком вертикальном выравнивании происходит следующее, чем меньше ширина клиентской области (окна), тем выше находится элемент и наоборот. В чём проблема.

Comments

[Иван Желудков]

Кажется я что-то напутал. Он даже 50% не выравнивает, почему?

[Иван Желудков]

Вопрос поменялся. Почему не работает margin-top: 50%; ?

Answer 1

[Иван Прилепский]

Здесь или здесь посмотрите

Comments

[Иван Желудков]

Спасибо, я на этих статьях и учился такому выравниванию.

[Иван Прилепский]

Тогда почему бы не воспользоваться одним из методов из статей? Вроде бы ни в одной из статей не видел выравнивание через margin-top:50%;

[Иван Желудков]

http://toster.ru/q/52066 Вот здесь я описал проблему иначе, более подробно. Не могу, потому что нельзя использовать абсолютное позиционирование.

Answer 2

[Webdesus]

Задайте height в 100% и все будет ок.)))

body {background: #2c3e50;}
div {
    height:100%;
  padding-top: calc(50% - 25px);
  height: 50px;
  width: 50px;
  margin: 0 auto;
}

Comments

[Иван Желудков]

Ошибка оказалось совсем в другом, поэтому вопрос меняется. Почему не работает margin-top: 50%; ?

[Webdesus]

А чем Вам мое решение не подходит? По поводу margin вы не учитываете размер элемента. Он с середины начнет рисоваться и дальше на высоту элемента вниз. По этому он будет всегда ниже центра

[Иван Желудков]

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

[Иван Желудков]

http://jsfiddle.net/XtPh8/3/ Вот я беру ваше решение. Сужаю область, элемент выше, расширяю, элемент ниже.

Answer 3

[Шамиль Нигматзянов]

Хмм, а так не работает разве?

div {
    width: 50px;
    height: 50px;
    position:relative;
    margin-top: 50%;
    top:-25px;
}

Comments

[Иван Желудков]

Там баг небольшой, изменяешь ширину, изменяется высота. Но вопрос уже решён, спасибо.

Answer 4

[Сергей Шилов]

Самый распространенный способ выравнить блог по вертикали - сделать примерно такое:

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;
}

Блок центруется идеально по центру и по горизонтали и по вертикали. Но я бы не советовал пока что использовать флекс, тк, его синтаксис часто меняется. Но моё мнение, что за флексом лежит будущее :)

Answer 5

[Сергей Протько]

padding-top считается по ширине (если задан в относительных еденицах) так же как padding-left по высоте. Это к слову единственный способ сделать резиновые примитивы (квадраты, круги, прямоугольники).

Comments

[Иван Желудков]

И как решить мою проблему в таком случае?

[Иван Желудков]

http://toster.ru/q/52066 Вот здесь я описал проблему иначе, более подробно

Answer 6

[Webdesus]

Все прекрасно вообщем работает. Не работает лишь в jsfiddle потому что там выполнение происходит во фрайме. Перейдите по ссылке которая в фрейме указано и увидите что все прекрасно работает.

Comments

[Иван Желудков]

Перешёл по ссылке, та же проблема. Попробуйте изменить ширину браузера и увидите проблему.

[Webdesus]

Да я понял проблему. Просто оказывается при некоторых размерах ширины она сбивается

[Иван Желудков]

При всех, отличных от размеров окна браузера 1х1, вроде так

Answer 7

[Webdesus]

Вам нужно клинская область? если да то поставьте

position: fixed;
top: 50%;

И ни мучайтесь более.

Comments

[Иван Желудков]

http://toster.ru/q/52066 Вот здесь я описал проблему. Фиксирование позиционирование не подходит.