Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > DIV-ой блок(нефикс) з текстом в центре

Автор: BAR23 10.8.2008, 13:47

В интернете есть много примеров как выставлять текст например в центре окна. Если ширина текста фиксированая то вопросов нет. Ето может выглядеть так:

Код



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Выравнивание слоя по центру</title>
<style type="text/css">

#center {
   width:200px;
   margin: 0 auto; /* Выравниваем по центру */
   background: #fc0; /* Цвет фона */
   }
</style>
</head>
<body>

<div id="center">
Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...
</div>

</body>
</html>

Но мне нужно выставить по центру блок с неведомой шириной? Подскажите пожалуйста.

Автор: bars80080 10.8.2008, 13:51

Код


body { text-align: center; }
#center { margin-left: auto; margin-right: auto; }

Автор: InfMag 10.8.2008, 13:51

Код


margin: 0 auto; /* Выравниваем по центру */

Первый раз подобное суждение наблюдаю своими глазами. 0_O
margin - это отступы, а не выравнивание
text-align: center;
вот выравнивание

Добавлено через 38 секунд
bars80080, может обьяснишь что делает с margin это auto??

Автор: BAR23 10.8.2008, 14:01

Я ето пробовал. Выходит блок ставит по центру текст, но сам блок если закрасить например:

Код


    background: #fc0; /* Цвет фона */

Выходит по ширине окна. Как я предполагаю если к диву применить внешний отступ

Код


     margin:0px auto;

то он должен полностью стать в центр(как с таблицей без ширины)
Можно так сделать?

Автор: bars80080 10.8.2008, 14:11

ну что значит с неведомой шириной? ты же сколько-то ему полагаешь ширины? будет ли он процентно от экрана зависить, фиксировано или растянется по всей ширине? ты же не можешь отдать ему совершенно любую ширину, ведь он же не просто висит на странице, а находится в общей разметке

Цитата(InfMag @ 10.8.2008, 13:51

)

Первый раз подобное суждение наблюдаю своими глазами. 0_O

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

Автор: BAR23 10.8.2008, 14:22

Цитата

Да, блок должен быть шириной которая будет определяться информацией в диве.
Тоесть по бокам блока (а не внутри) должен быть отступ. bars80080Можеш дать пример?

Автор: bars80080 11.8.2008, 08:47

пример не дам. могу лишь посоветовать воспользоваться свойством http://htmlbook.ru/css/min-width.html для задания минимальной ширины (не работает в ИЕ6), чтобы в случае маленького содержимого блок не растягивался по всей возможной ширине, и выставить margin: 0 auto; для автоматического центрирования в мозиле, и text-align: center; внешнего контейнера для ИЕ

Автор: webster 11.8.2008, 11:41

http://www.artlebedev.ru/tools/technogrette/html/align-center/