Опять про css выравнивание
October 24th, 2007 by Yuriy DrozdovПро вертикальное выравнивание я уже писал, можно почитать тут и тут. Написать снова меня натолкнула статья Артема Курапова - Element alignment.
Выравнивание - стандартная задача для CSS. Ее можно разбить на три:
- Выравнивание строковых элементов
- Выравнивание блочных элементов
- Выравнивание блочных элементов вертикально
Выравнивание строковых элементов
Тут все просто. Для этого существует css свойство text-align. Например:
-
p {text-align:center;}
Текст центрированный по горизонтали
Выравнивание блочных элементов
Чтобы выравнять блок по горизонтали, ему необходимо задать ширину и отступ от левого и правого края родительского контейнера.
-
P.blocktext {
-
margin-left: auto;
-
margin-right: auto;
-
width: 100px;
-
}
Блок текста центрированный по горизонтали,
сам текст внутри блока выравнен влево.
Выравнивание блочных элементов вертикально
Вертикальное выравнивание с помощью CSS делается путем назначения свойству display значения table-cell и свойству vertical-align значения middle.
-
DIV.container {
-
min-height: 100px;
-
display: table-cell;
-
vertical-align: middle
-
}
Блок отцентрированный по вертикали.
Все сказанное выше было пересказом статьи из w3c. Выравнивать с помощью css нужно именно так.
Но у 27% посетителей этого блога (именно такой процент пользователей Internet Explorer среди посетителей) последние 2 примера не будут работать. А все потому, что IE не поддерживает данных значений css свойств. Отсюда и все танцы с бубном вокруг этого выравнивания.
Как бороться с IE можно почитать в статье Вертикальное выравнивание в CSS, часть 2, а также мне показалась очень интересной технология описанная на cssing.org.ua - метод выравнивания с использованием expression.
P.S. Пример с горизонтальным выравниванием не будет работать в IE версии ниже 6-й, а также для IE 6 в quirks mode. Спасибо Arestov'у за замечания.
На cssing’е описаны еще другие методы вертикального выравнивания для IE, но, пожалуй, expression - самый удобный (пишем css и никаких дополнительных элементов).
А вообще, если бы не было IE, то писать css было бы сплошным удовольствием
было бы скучно
По-моему, в большинстве случаев получить примерно тот же эффект, что и в последнем примере можно с помощью:
padding-top:…
padding-bottom:…
Полностью согласен с Voff4eg в отношении IE
вся фишка в “резиновости” дизайна, padding-top:auto - не работает. А если неизвестен размер блока?
Какой размер? Высота или ширина?
Я имел в виду только второй пример (с вертикальным выравниванием).
min-height задает только минимальную высоту. Если увеличить количество текста в блоке, то он будет увеличен и при этом изменятся отступы от текста до края блока.
Я не предлагал устанавливать padding-top:auto. Имелось ввиду, что их нужно задать равными, например, 40px.
Если высота блока, который нужно вертикально выровнять не известна. min-height задается для родительского блока.
что-то порвало теги
согласен
в ИЕ не работает выпвнивание по вертикали ((((
как бы выравнить в ИЕ???
margin-left: auto;
margin-right: auto;
у меня работате в ие, а у вас откуда информация что не работает у ваших посетителей?
В 7 ие должно работать, а в 6-м и ниже - нет.
у меня в 6м работатет
http://habrahabr.ru/blog/css/40294.html
хм, у меня тоже работает при правильном DOCTYPE