[Проблема] Борьба с IE. Центрирование содержимого по вертикали

Maxim Kopytov · 27.04.2010 00:46

Кому удавалось победить IE?
Строю горизонтальную менюшку при помощи элементов текстового списка.

Сейчас она такая:

А нужно, чтобы текст в блоках был по центру. По горизонтали - не проблема. А вот как сделать центрирование по вертикали?

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>
<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px;}
a {display: block; background-color:#FF9900; height: 46px; text-align:center;}
.left {padding-left: 10px;}
.right {padding-right: 10px;}
</style>
</head>
<body>
<ul>
<li><div class="left"><div class="right"><a href="#">Main page</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Products</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Interesting article about Mr. Brown</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Hallo! How are You?</a></div></div></li>
<li><div class="left"><div class="right"><a href="#">Feedback</a></div></div></li>
</ul>
</body>
</html>
[/HTML]

Dolphin · 27.04.2010 01:13

display: table-cell; vertical-align: middle;

Maxim Kopytov · 27.04.2010 09:03

Цитата:

Сообщение от Dolphin

display: table-cell; vertical-align: middle;

Internet Explorer 6,7 об этом не знает.
Если бы все было так просто.

Timur Naimov · 27.04.2010 09:34

Цитата:

Сообщение от Maxim Kopytov

А вот как сделать центрирование по вертикали?

Сверстайте меню таблицей, у td есть valign.

Maxim Kopytov · 27.04.2010 09:56

Цитата:

Сообщение от Timur Naimov

Цитата:

Сообщение от Maxim Kopytov

А вот как сделать центрирование по вертикали?

Сверстайте меню таблицей, у td есть valign.

Требование - блочная верстка.
Таблицы только для контента.

Использование условных комментариев допускается.








Aziz Madetov · 27.04.2010 10:01

Задайте блокам фиксированную высоту и подгоните padding под размер шрифта в пикселах.

Evgeniy Sklyarevskiy · 27.04.2010 10:04

Оффтоп:

Цитата:

Сообщение от Maxim Kopytov

Требование - блочная верстка.

Чье требование? Неужели заказчика? Не стоит упираться в блочную верстку ради нее самой, часто проще таблицами сделать.

Maxim Kopytov · 27.04.2010 10:09

Цитата:

Сообщение от eNews uz

Задайте блокам фиксированную высоту и подгоните padding под размер шрифта в пикселах.

А если текст в 2 или 3 строки?
Смотрите иллюстрацию выше, в 1-ом сообщении.

Aziz Madetov · 27.04.2010 10:14

Цитата:

Сообщение от Evgeniy Sklyarevskiy

Чье требование? Неужели заказчика? Не стоит упираться в блочную верстку ради нее самой, часто проще таблицами сделать.

Согласен. Блочная верстка была бы уместна при выпадающем меню.

Aziz Madetov · 27.04.2010 10:17

Цитата:

Сообщение от Maxim Kopytov

А если текст в 2 или 3 строки?
Смотрите иллюстрацию выше, в 1-ом сообщении.

К сожалению, мобильная версия форума не отображает картинки. См. предыдущее мое сообщение.

Знаете ли Вы, что ...
	...нарушения правил форума наказываются. Старайтесь их не нарушать.
	<< Предыдущий совет - Случайный совет - Следующий совет >>

Реклама и уведомления
<a href='http://adv.uzinfocom.uz/www/delivery/ck.php?n=a528de92&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://adv.uzinfocom.uz/www/delivery/avw.php?zoneid=65&cb=INSERT_RANDOM_NUMBER_HERE&n=a528de92&ct0=INSERT_CLICKURL_HERE' border='0' alt='' /></a>