наверх





К сожалению, не все знают, как правильно отцентрировать элемент на веб-странице, используя лишь CSS свойства и HTML разметку. А ведь это так просто!


В этом примере я покажу, как сделать так, что бы элемент на веб-странице был по середине, относительно родителя. Делать мы это будем в стилях. Конечно, это можно осуществить и через HTML:

<center>...</center>


Но у данного решения есть недостатки: выравнивание текста будет по середине. Это будет не красиво и неудобно.

Итак, что бы сделать сайт по середине веб-странице, нужно тегу <body> добавить следующие свойства:

body {
background-color:white; /* Фон */
margin:0;     /* Внешний отступ 0 */
padding:0;     /* Внутренний отступ 0 */
text-align:center;    /* Текст по центру (для IE) */
}


Свойство text-align было задано специально для браузера IE. Если оставить так, как есть, то выравнивание текста будет по центру. Поэтому создадим контейнер, который пропишем сразу после тега <body>:

.main {
margin:0 auto;    /* Внешних отступов 0, делаем элемент по центру */
width:800px;    /* Обяхательно наличие ширины */
text-align:left;    /* Текст по левому краю  */
border-left:1px solid #ccc;    /* Граница слева */
border-right:1px solid #ccc;    /* Граница справа */
border-bottom:1px solid #ccc;    /* Граница снизу */
height:500px;    /* Высота */
}


Здесь же, мы добавили свойство text-align со значением left, это сделано специально, что бы текст выравнивался по левому краю. Так же, должны быть обязательно прописаны свойства ширины и внешних отступов. Если вы все сделали правильно, то сайт у вас должен располагаться по центру.




Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.