Пробелема с vertical-align в DIV
<title></title>
</head>
<style type="text/css">
div#admin {
border: solid #00659c 2px;
width: 100%;
background-color: #efefef;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Sans-Serif;
height: 30px;
text-align: left;
vertical-align: middle;
margin: 0px;
padding: 4px;
}
div#admin a { color: #00659c; }
div#admin a:hover { color: #DD6900; }
</style>
<body>
<div id="admin">
<a href="%DIR_UP%index.php">Главная страница</a> |
<a href="./admin/config.php">Настройки</a> |
<a href="./admin/exit.php">Выход</a>
</div>
</body>
</html>[/HTML]
вот. вообщем проблемка мелкая. текст почему-то никак не хочет выравняться в середине (т.е. не работает свойство vertical-align).
Знает ли кто в чем загвоздка?
Хак, который выкопал с гугля ;)
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Универсально вертикальное центрирование с помощью CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* просто чтобы видеть бордер */
</style>
</head>
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">
любой текст<br>
любая высота<br>
любой контент, например, генерированный с базы данных<br>
все вертикально отцентрировано
</div>
</div>
</div>
</body>
</html>
[/html]
Область применения: строковые и 'table-cell' элементы
Да и для строковых вроде как криво пашет, хотя может в этой части я не очень понял логику CSS спецы... уж большо, имхо, они там перемудрили.
На своем хомяке делал вертикальное выравнивание через высоту линейного блока, селектор #menu_page a.
[html]<div id="outer">
<div id="middle">
<div id="inner">
любой текст<br>
любая высота<br>
любой контент, например, генерированный с базы данных<br>
все вертикально отцентрировано
</div>
</div>
</div>[/html]И структуризированный стиль:
<style type="text/css">
#outer {height: 400px; overflow: hidden; [COLOR=Blue]position: relative;[/COLOR]}
[COLOR=Green]#outer[id] {display: table; position: static;}[/COLOR]
[COLOR=Blue]#middle {position: absolute; top: 50%;} [/COLOR][COLOR=Gray]/* for explorer only*/[/COLOR]
[COLOR=Green]#middle[id] {display: table-cell; vertical-align: middle; position: static;}[/COLOR]
[COLOR=Blue]#inner {position: relative; top: -50%} [/COLOR]/* for explorer only */
[COLOR=Gray]/* optional: #inner[id] {position: static;} */[/COLOR]
</style>
Цветовая легенда: ;)
[COLOR=Blue]CSS style for Internet Explorer only[/COLOR]
[COLOR=Green]CSS styles for standard browsers
[/COLOR][COLOR=black]CSS2 селектор #value[id] есть эквивалентом #value, но ИЕ игнорит эти типы значений. В общем, синтаксис *[foo] обозначает любой эллемент с атрибутом foo. Любой HTML-эллемент #something должен иметь id атрибута, установленный в "something". Получается, #value[id] работает только в стандартных броузерах (похоже работает и .value[class])[/COLOR][COLOR=Green]
[/COLOR]
Ответил по сабжу, если автор допускает применение таблиц в своем коде, то конечно лучше заюзать таблицу.
Я бы не согласился, что фактически получается таблица. Фактически получается div со свойствами таблицы. А применять таблицу будет неправильно. Таки таблицы для табличных данных.
Так я разве против? Прекрасно понимаю, что кому-то удобнее верстать таблицами и ничего против не говорю никогда. Только в плане div'ной верстки разумнее указать для блока табличные свойства, чем использовать саму таблицу.
И зря. Это получается именно таблица. Через селекторы можно вообще изменить любой элемент страницы и сделать его таблицей. И это именно и получиться таблица. Потому что схема визуального форматирования для такого элемента будет именно табличной, и логика его отрисовки будет табличной (в частьность не насчет его браузер рисовать до получения всей талицы).
Поэтому в данном случаем делать div который реально будет таблицей просто нет совршенно ни какого смысла.
Вот именно это и получается. Через CSS ты можешь сделать поведение TABLE таким, как будто это DIV или A, а сменив CSS ты можешь сделать DIV талицей.
Именно поэтому я подчеркиваю, что визуального представление зависит не от используемого тега, а именно от того, что прописано в CSS. Если некий тег прописан именно как таблица (а к примеру для XML у нас может быть вообще произвольное имя тега), это таблицей и будет.
И "div со свойствами таблицы" это и есть таблица. Ты просто зауживаешься до уровня буквального понимаю кода, когда нужно это рассматривать на функциональном (визуальном), логическом уровне.