Я работаю над проектом, в котором клиент хочет, чтобы навигация <div> выровнялась в соответствии с высотой экрана, подобно тому, как margin-left в процентах работает при уменьшении ширины экрана.
Итак, я дал margin-top: 20%, а навигация <div> отображает это поле, но когда я уменьшаю высоту окна, он не корректируется в соответствии с высотой экрана, хотя он работает, когда я уменьшаю ширину экрана.
Мой вопрос не в том, как я могу достичь этого, но почему процент работает горизонтально, а не вертикально?
Вот пример: http://jsfiddle.net/sandeep/5VReY/
Процент работает по ширине блока контейнера в соответствии со спецификациями css
Процент рассчитывается по ширине сгенерированный блок, содержащий блок. Обратите внимание, что это верно для "margin-top" и "margin-bottom".
Подробнее см. w3.org.
Вы можете играть в свойствах верхнего и нижнего пределов ширины, имеющих преимущество по умолчанию в "авто";
Если у вас есть такой блок:
<div class="centered"></div>
Он может быть центрирован по вертикали следующим образом:
.centered {
width: 100px; height: 100px; /* must be present. No matter the value */
position: absolute; /* to props top/bottom take effect */
margin: auto; /* here the magic. */
bottom: 0px; top: 0px; /* This is how you center a block verticaly */
}
То же самое можно сделать для горизонтального выравнивания ширины влево/вправо. Вы также можете иметь смещение, чтобы убрать другую точку, чем центр блока.
Здесь я оставляю вам несколько примеров того, что и как можно сделать, объединяя эти свойства. http://jsfiddle.net/SQDJ6/