Как выровнять блок div по центру страницы 4/5 (1)

Казалось бы, тривиальная задача:  выровнять блок <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 отсчитываются относительно ближайшего позиционированного элемента. Если такой элемент отсутствует, то отсчет координат идет от краев документа.
Если ни один из выше перечисленных способов не помог, то есть еще такой вариант:
.block {
margin: 0 25% 0 25%;
width: 50%;}

Помогает даже в "запущенных случаях".
Надеюсь, что статья была вам полезной!


css

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

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