Выравнивание по центру

Простой пример выравнивания по центру; подходит как для страницы, так и для отдельных блоков. Вот как это сделано в шаблонах Blogger.

Магия кроется в тегах body и div outer-wrapper. Хотя нет, вру: магия как обычно в CSS.

В общем случае, теги расположены так:

<body>
  <div id="outer-wrapper">
    ...содержание...
  </div>
</body>

Чтобы выровнять содержимое по центру, нужно задать body text-align:center, а для блока outer-wrapper фиксированную ширину width:1000px, а так же отступы auto слева и справа.

Теперь нужно вернуть содержимому outer-wrapper «нормальное» выравнивание текста (по левому краю) text-align:left.

В результате стили CSS для элементов будут выглядеть так:

body {
  text-align:center;
}
#outer-wrapper {
  margin:0 auto;
  text-align:left;
  width:1000px;
}

Вуа-ля – страница расположена по центру.

Записная книжка на любой случай

Выравнивание по центру

Выравнивание по центру

0 коммент.:

Отправить комментарий