четверг, 21 октября 2010 г.

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

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

Простой пример выравнивания по центру; подходит как для страницы, так и для отдельных блоков. Вот как это сделано в шаблонах 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;
}

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

10 Комментариев :

Ingward комментирует...

Croaker, большое спасибо за помощь! :) Выручил!

Кстати, сначала я добавил #outer-wrapper с твоими стилями (лишь 1000px поменял на 1007px), но ничего не поменялось.. Поэкспериментировал и оказалось, что нельзя, чтобы и в body тоже было значение "width:1007px;" (оно у меня уже было). Теперь всё гут :).

Анонимный комментирует...

Я случайно наткнулась на ваш блог и подумала, что вы, должно быть можете мне помочь. Я не могу найти так сразу. Но могли бы вы написать такой глупый пост об оформлении самого поста? выравнивание справа слева, цвет и прочее. но особенно меня интересует, как сделать, чтобы продолжение поста появлялось кликом не на "more", а на первую картинку. Спасибо!

Croaker комментирует...

Приветствую! А вот это не пойдет? Изображение – ссылка на пост

Iren комментирует...

Croaker, добрый день! Подскажите, пожалуйста, пытаюсь сделать заголовок по центру (Сейчас он смещен влево). Вставляю Ваши прописные стили, но получается так, что и текст в блоге тоже по центру. Как сделать , чтоб только заголовок был по центру? Спасибо

Croaker комментирует...

Доброй ночи, Iren! А заголовок блога или заголовок каждого сообщения?

Если только стиль заголовка блога (где картинка “Irraz, Irraz”), то нужно добавить в стили CSS блога следующее:
#Header1_headerimg {
margin:0 auto;
}

Iren комментирует...

Спасибо

Croaker комментирует...

Iren, только если совет помог ;)
Времени на блог нет (моя основная деятельность связана с более крупными прожектами ^_^), поэтому стараюсь отвечать максимально конкретно.

Iren комментирует...

Да, спасибо, я уже все поправила у себя в блоге

Вячеслав комментирует...

Вот именно так и я делаю.

Дима Овдийчук комментирует...

как разместить название (заголовок) блога по центру?

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

Жги!