Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

Методы вертикального центрирования с помощью CSS. Метод задания равных отступов сверху и снизу

  • Четверг, 29 сентября 2012, 09:47 |
  • Автор: falkovsky |
  • Просмотров: 1730 |
  • Комментарии: 1 |
  • В закладки:
В данном методе задаются равные отступы сверху и снизу от родительского элемента. Т.е. смысл метода заключается в установке внешних отступов элемента. Допускается использование полей внутри элемента, все зависит от специфики проекта.

HTML:
<div id="parent">
    <div id="child">Содержание</div>
</div>


CSS:
#parent {
    padding: 5% 0;
}
#child {
    padding: 10% 0;
}


В коде CSS примера мы задаем отступы сверху и снизу для обоих элементов. Устанавливая отступы для вложенного элемента, мы центрируем его по вертикали, а за счет отступов для родительского элемента, мы отцентрируем элемент, вложенный в него. Лучше всего будет использовать относительные единицы измерения, например проценты, тогда браузер сам решит проблему вычислений. Однако если вы используете абсолютные единицы измерения, то придется вспомнить «высшую» математику и немного посчитать. В расчетах, собственно, и есть маленький недостаток данного метода.
Пример: Родительский элемент имеет высоту 500px, а вложенный элемент - 150px. Необходимы отступы по 175px сверху и снизу.
175+175+150=500
цветы
  • Тэги публикации
Добавить комментарий