Как выровнять блок div по центру страницы

Казалось бы, тривиальная задача:  выровнять блок <div> по центру страницы с помощью css. Но на первых этапах изучения html и сss может серьезно озадачить начинающего веб - мастера. Сам сталкивался с такой проблемой, когда пытался отцентровать <div> на макете сайта, когда только начинал изучать веб - программирование. Что и послужило началом для написания этой статьи.)

Итак, приступим:

Допустим, у нас есть блок <div> шириной 100px с текстом внутри.

<div class=block>Привет!</div>
  • Чтобы выровнять  блок <div> по центру c относительным позиционированием, необходимо обнулить у него все отступы:
.block {
width:100px;
position: relative;
margin:0 auto}
  • Чтобы выровнять блок <div> с абсолютным позиционированием, необходимо дополнительно обнулить координаты left и right:
.block {
width:100px;
position: absolute;
margin:0 auto;
left:0
right:0}
Следует учитывать, что margin:0 auto не работает в браузерах  Internet Explorer ниже 8 - ой версии.
При абсолютном позиционировании координаты left, right, bottom,top отсчитываются относительно ближайшего позиционированного элемента. Если такой элемент отсутствует, то отсчет координат идет от краев документа.


css

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

Ваш e-mail не будет опубликован.

*

code