Блог старого компьютера

Блог старого компьютера


Главная html & css Выровнять блок вертикально по центру (абсолютное, фиксированное позиционирование)

Выровнять блок вертикально по центру (абсолютное, фиксированное позиционирование)

06.07.2012 04:20 Администратор html & css
Печать PDF
Если известны размеры будущего блока то выровнять его вертикально по центру совсем не сложно. Для этого нам не понадобится ни каких JS скриптов и хаков. Предположим что нам необходимо выровнять по центру блок с шириной 500 пикселей и высотой 500 пикселей.  

Для этого напишем небольшой css код:

#block{
border:1px solid silver;
background: white;
width:500px;
height:500px;
position:fixed;
margin-left: -250px;
margin-top: -250px;
left:50%;
top:50%;
}

В данном случае элемент который будет иметь id равным block окажется выровненым по центру как по горизонтали так и по вертикали.

И так что мы сделали, мы указали блоку фиксированную позицию, указали кординату точки его начала по оси x 50% и по оси y 50%, что говорит о том что блок будет начинатся в середине экрана. Но так как блок у нас имеет свои размеры то чтоб его выровнять по центру нам необходимо сдвинуть его на половину размера блока. И делаем это с помощью отрицательного значения margin.

Попробую показать наглядно на изображении:

Комментарии  

 
0 #1 ваня 27.03.2013 14:49
8) молодец админ сайта)))0 :)
Цитировать
 

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?