.q {
vertical-align: middle;
display: table-cell;
height: 1000px;
}
Блочная верстка: вертикальное выравнивание
Доброго времени суток.
Прочитал не одну статью по этому вопросу, посмотрел кучу примеров, однако так и не нашел решения.
[html]
<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" >
<tr>
<td valign="middle" style="width: 90px; background-color: silver;">
<img src="someimage.gif" width="80" height="80" alt="picture 80x80" />
</td>
<td valign="middle" style="width: auto; background-color: gray;">
<h1 style="text-align: center">Длинный текст</h1>
<p style="text-align: center">Это какой-то длинный-предлинный текст, который может содержать много-много строк.</p>
<p style="text-align: right;">Этот текст может содержать еще и много-много абзацев.</p>
</td>
</tr>
</table>[/html]
При изменении размеров окна происходит вертикальное выравнивание контента, что собственно и нужно.
Вопрос: Как добиться такого же поведения контента, заменив таблицу div-ами?
Спасибо
Прочитал не одну статью по этому вопросу, посмотрел кучу примеров, однако так и не нашел решения.
[html]
<table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" >
<tr>
<td valign="middle" style="width: 90px; background-color: silver;">
<img src="someimage.gif" width="80" height="80" alt="picture 80x80" />
</td>
<td valign="middle" style="width: auto; background-color: gray;">
<h1 style="text-align: center">Длинный текст</h1>
<p style="text-align: center">Это какой-то длинный-предлинный текст, который может содержать много-много строк.</p>
<p style="text-align: right;">Этот текст может содержать еще и много-много абзацев.</p>
</td>
</tr>
</table>[/html]
При изменении размеров окна происходит вертикальное выравнивание контента, что собственно и нужно.
Вопрос: Как добиться такого же поведения контента, заменив таблицу div-ами?
Спасибо
к примеру так:
Конечно Осел может не понять, но это уже его трудности
Код:
Код:
<div class='q'>
...
</div>
...
</div>
Конечно Осел может не понять, но это уже его трудности
Да нет, это наши трудности.
Я что-то никакого особенного выравнивания там не наблюдаю. То, что есть, можно и паддингами нормально оформить.
А вообще вот http://cssing.org.ua/2007/04/26/another-css-valign-method/ и вот http://www.jakpsatweb.cz/css/css-vertical-center-solution.html, и вот http://habrahabr.ru/tag/вертикальное%20выравнивание/
Ещё погуглить?
А вообще вот http://cssing.org.ua/2007/04/26/another-css-valign-method/ и вот http://www.jakpsatweb.cz/css/css-vertical-center-solution.html, и вот http://habrahabr.ru/tag/вертикальное%20выравнивание/
Ещё погуглить?
в гугле наберите holy grail css, изучите и по той-же технологии делайте
Доброго времени суток[indent]2vathsven & 2likeopera:
Еслиб все было так просто... это (и многое другое) я посмотрел прежде чем задать вопрос на форум[/indent]Проблема в использовании float и заранее неизвестной высоте блока.
Нашел возможное решение, однако теперь проблема в браузерной несовместимости CSS.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div.parent { background-color: #CECECE; display: table; }
div.parent > div { display: table-cell; }
div.i_can_grow { width: 90%; background-color: #FFFFFF; }
div.align_me { vertical-align: middle; }
-->
</style>
</head>
<body>
<div class="parent" style="border: solid 1px red;">
<div class="align_me" style="border: solid 1px blue;">
<img src="picture.gif" width="80" height="80" alt="Изображение 80x80" style="border: solid 1px gray; display: block;" />
<!-- Изображение должно вертикально центрироваться по отношению к тексту при изменении размеров окна -->
</div>
<div class="i_can_grow" style="border: solid 1px green;">
<h1 style="text-align: center;">Заголовок какого-то текста</h1>
<p>Какой-то интересный и познавательный текст, который может содержать много-много строк.</p>
<p>Этот интересный и познавательный текст может, так же, содержать много-много абзацев.</p>
<!-- Текст может изменять высоту блока при изменении размеров окна -->
</div>
</div>
</body>
</html>[/html]
Данный код работает в Opera(9.64) и FF(3.6) и точно не работает в IE (6,7) - проверено на себе :) и показывает, что собственно мне нужно.
Вопрос: Как обеспечить пресловутую совместимость (или может переработать html/css для достижения таковой)?
Спасибо
Еслиб все было так просто... это (и многое другое) я посмотрел прежде чем задать вопрос на форум[/indent]Проблема в использовании float и заранее неизвестной высоте блока.
Нашел возможное решение, однако теперь проблема в браузерной несовместимости CSS.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div.parent { background-color: #CECECE; display: table; }
div.parent > div { display: table-cell; }
div.i_can_grow { width: 90%; background-color: #FFFFFF; }
div.align_me { vertical-align: middle; }
-->
</style>
</head>
<body>
<div class="parent" style="border: solid 1px red;">
<div class="align_me" style="border: solid 1px blue;">
<img src="picture.gif" width="80" height="80" alt="Изображение 80x80" style="border: solid 1px gray; display: block;" />
<!-- Изображение должно вертикально центрироваться по отношению к тексту при изменении размеров окна -->
</div>
<div class="i_can_grow" style="border: solid 1px green;">
<h1 style="text-align: center;">Заголовок какого-то текста</h1>
<p>Какой-то интересный и познавательный текст, который может содержать много-много строк.</p>
<p>Этот интересный и познавательный текст может, так же, содержать много-много абзацев.</p>
<!-- Текст может изменять высоту блока при изменении размеров окна -->
</div>
</div>
</body>
</html>[/html]
Данный код работает в Opera(9.64) и FF(3.6) и точно не работает в IE (6,7) - проверено на себе :) и показывает, что собственно мне нужно.
Вопрос: Как обеспечить пресловутую совместимость (или может переработать html/css для достижения таковой)?
Спасибо
Сделайте на таблицах и не морочьте себе голову. Сдохнет ие6 - будем нормально делать.
Доброго времени суток
В результате изучения различных вариантов реализации кросс-браузерного вертикального выравнивания остановился на применении [highlight]expression[/highlight] для IE 6,7 и [highlight]display: table-cell; vertical-align: middle;[/highlight] для остальных (в которых проверял, см. ниже).
На данный момент пришел к такому решению:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.parent {
width: 100%;
margin: 0 auto;
border: solid 1px #008080;
background-color: #CECECE;
display: table;
}
div.align_me {
background-color: #FFFFFF;
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
div.align_me {
display: inline-block;
float: left;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}
</style>
<![endif]-->
</head>
<body>
<div class = "parent">
<div class="align_me" style="background: none; width: 80px;">
<img src="someimage.gif" width="80" height="80" alt="Изображение 80x80" /></div>
<div class="align_me" style="padding: 5px; float: none; ">
<h1 style="text-align:center;">Заголовок какого-то текста</h1>
<p>Какой-то интересный и познавательный текст, который может содержать много-много строк.</p>
<p>Этот интересный и познавательный текст может, так же, содержать много-много абзацев.</p></div>
</div>
</body>
</html>
[/html]
HTML-валидатор ошибок не выдает
CSS-валидатор тоже (для CSS2)
Корректно работает в браузерах на платформе Win32 (проверено на себе;)):
(может кто проверит)
[size=+1]У кого какие дополнения? Может что в CSS подправить?[/size]
Спасибо
В результате изучения различных вариантов реализации кросс-браузерного вертикального выравнивания остановился на применении [highlight]expression[/highlight] для IE 6,7 и [highlight]display: table-cell; vertical-align: middle;[/highlight] для остальных (в которых проверял, см. ниже).
На данный момент пришел к такому решению:
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
.parent {
width: 100%;
margin: 0 auto;
border: solid 1px #008080;
background-color: #CECECE;
display: table;
}
div.align_me {
background-color: #FFFFFF;
display: table-cell;
vertical-align: middle;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
div.align_me {
display: inline-block;
float: left;
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}
</style>
<![endif]-->
</head>
<body>
<div class = "parent">
<div class="align_me" style="background: none; width: 80px;">
<img src="someimage.gif" width="80" height="80" alt="Изображение 80x80" /></div>
<div class="align_me" style="padding: 5px; float: none; ">
<h1 style="text-align:center;">Заголовок какого-то текста</h1>
<p>Какой-то интересный и познавательный текст, который может содержать много-много строк.</p>
<p>Этот интересный и познавательный текст может, так же, содержать много-много абзацев.</p></div>
</div>
</body>
</html>
[/html]
HTML-валидатор ошибок не выдает
CSS-валидатор тоже (для CSS2)
Корректно работает в браузерах на платформе Win32 (проверено на себе;)):
- Netscape 7.01 (?+)
- Google Chrome 1.0.154.59 (?+)
- Safari 3.0.4 (523.12.9) (?+)
- Firefox 3.0.18+ (?-)
- Internet Explorer 6+ (JavaScript Enabled) (?5.5)
- Opera 9.64+ (?8)
(может кто проверит)
[size=+1]У кого какие дополнения? Может что в CSS подправить?[/size]
Спасибо