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

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

  • Четверг, 29 сентября 2012, 08:43 |
  • Автор: falkovsky |
  • Просмотров: 1578 |
  • Комментарии: 0 |
  • В закладки:
В примере показано одновременное центрирование по вертикали и горизонтали:

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


CSS:
#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}


Разберем данный метод по пунктам:
1. Установите тип позиционирования элементов.
2. Вложенному элементу div задайте значения top и left = 50% (центр родительского элемента). Левый верхний угол вложенного элемента попадет в центр. Для того, чтобы решить эту проблему необходимо сделать следующее:
• Поднимаем его вверх (50% от высоты)
• Затем, сдвигаем влево (50% от ширины)
• Для верхнего и левого полей задаем отрицательные значения. Значения должны быть равны 50% от значения высоты и ширины соответственно.

Данный метод требует задания центрируемому элементу высоты. В некоторых браузерах он не работает.

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

Узнайте, как научится копить деньги и увеличить свои накопления
  • Тэги публикации
Добавить комментарий