Иконка в H2 - как вертикально центрировать?

PoshtarBoba · April 21, 2010

Значит, суть такова: у заглавий справа есть иконки:

h2 img { float:left;}

<h2><img src="icon01.gif" />Lorem ipsum</h2>

<h2><img src="icon02.gif" />Lorem ipsum</h2>

...

Сложность в том, что:

- высота иконок может варироваться в пределах страницы - 10..60px и более;

- заглавие может быть длинным, на 2-3 строчки (особенно в узких колонках);

- кол-во иконок динамическое и не ограничено, так что создавать стили для h2 с иконкой-бекграундом и левым паддингом - не очень правильная тактика.

Что можете предложить для решения такой проблемы?

Вот рабочее решение, но оно... мягко сказать, некрасивое и нарушает логику построения документа:

<td><h2>Lorem ipsum</h2></td></tr>

</table>

Я б уже на дивы согласился, которые сменили бы ячейки таблицы, но им нельзя задать жестко высоту, чтоб были одинаковые по высоте.

SelenIT · April 22, 2010

стили для h2 с иконкой-бекграундом и левым паддингом - не очень правильная тактика

Почему? Если иконка - именно оформление, а не иллюстрация...

Если хотя бы ширина иконок фиксирована - можно извернуться как-то так...

<!DOCTYPE html>
<title>h2</title>
<style>
h2 * { vertical-align: middle; }
h2 span { display: inline-block; padding-left: 50px; }
h2 img { margin-right: -50px; }
</style>
<h2><img src="icon.gif"><span>Текст в 1 строку</span></h2>
<h2><img src="icon.gif"><span>Текст подлиннее в 2 строки</span></h2>
<h2><img src="icon.gif"><span>Очень-очень длинный-предлинный текст в целых 3 строки</span></h2>

Но по-моему фонами - лучше всего.

PoshtarBoba · April 22, 2010

О, класс, большое спасибо!

Я вчера все заглавия в таблицы позасовывал, пол-ночи уснуть не мог из-за этого.

Фонами не лучше - допустим, это заглавия блогов и картинку (смайлик, аватарку, иконку) для заглавия может выбрать сам пользователь из большого колличества на сайте, из своей коллекции загруженных изображений или вообще тупо указав внешнюю ссылку. В этом случае CSS придётся генерить динамически или ещё бог знает какие уловки искать.

Sign In

Иконка в H2 - как вертикально центрировать?

Question

PoshtarBoba

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

PoshtarBoba

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information