Позиционирование текста внутри тега H2

[TheKIP]

Имеется тег H2 (генерируется CMS, да и в тексте его удобней использовать для типографики).

Дизайнером, для него заданно следующее оформление (белый шрифт, и картинка в фоне):

Проблема в том, что текст в заголовке, не всегда помещается в одну строку, и необоходимо сделать, что бы он всегда оставался по средине своего бэкграунда.

Т.е. выглядеть так:

Для этого я создал вот такой код (html я приводить не буду, т.к. он и так понятен):

.content h2 {
background:url("images/h2_bg.gif") no-repeat scroll center bottom transparent;
color:#FFFFFF;
line-height:40px;
margin:20px 0 0 -20px;
padding:0 0 0 20px;
width:517px;
}

В коде, я задаю line-height:40px; что бы строка была посередине и соответсвенно из за него, одна строка текста встает ровно по середине заливки (заливка высотой 40пикс), ну а вторая строка, разумеется вылазиет за её пределы. Такой метод не подходит.

Попытка отцентровать тект в бэкграунде, установкой высоты элемента height: 40px, и поставив вертикальное выравнивание vertical-align:middle, ни к чему не привела.

Если убрать line-height:40px;, и больше ничего не применять, то 2 строки, спокойно влазиют в фон, но соответсвенно когда остается одна строка, оно находится не по середине а ближе к верхнему краю.

Так вот вопрос, КАК это реализовать? И реально ли вообще? (Что бы строки всегда были по середине, не зависимо от их количества)

[Mal4ishnik]

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

Edited May 25, 2010 by Mal4ishnik

[TheKIP]

Спасибо, присвоил объекту свойство display: table-cell, и начало работать свойство vertical-align:middle

Однако, перестали работать отступы margin...

[psywalker]

Спасибо, присвоил объекту свойство display: table-cell, и начало работать свойство vertical-align:middle

Однако, перестали работать отступы margin...

А в ИЕ6-7 не проверял?

[TheKIP]

не работает разумеется. Но подгонять под них и не хочу. Июо инфа и так будет видна, и ничто нигде налазить не будет, будет только лишь не отцентровано. (не критично вобщем).

Лучше подскажите что делать с margin-ами? При присвоении объекту стиля ячейки, они перестали работать..

[psywalker]

не работает разумеется. Но подгонять под них и не хочу. Июо инфа и так будет видна, и ничто нигде налазить не будет, будет только лишь не отцентровано. (не критично вобщем).

В сети можно найти экспрешан для ИЕ6-7, чтобы был полный кросс.

Лучше подскажите что делать с margin-ами? При присвоении объекту стиля ячейки, они перестали работать..

Обернуть в див всю конструкцию и ему уже назначить отступы.

[TheKIP]

В сети можно найти экспрешан для ИЕ6-7, чтобы был полный кросс.

Обернуть в див всю конструкцию и ему уже назначить отступы.

Да с дивами то все понятно, еслиб была возможность верстать этот кусок с дивами, то и невозникло бы этой темы. Суть в том, что пользователь должен в редакторе набрать заголовок, присвоить ему стиль "заголовок 2" и все оформилось по чудному мгновенью. А добавлять дивы вокруг, это решение только лишь для статического сайта.

Експрешены, видел в той же статье что дал пользователь в первом комментарии. Не использовал, потому что просто лень и не нужно, да и вроде они применяются только к блочному объекту находящемуся внутри ячейки, а у меня там только текст, без какой либо обертки.

В общем я так понимаю свойство display: table-cell анулирует действие маржинов, и сделать это никак нельзя. Если уж это так, то придется так и оставить, дизайн вроде не сильно портится..

[mishka]

Да с дивами то все понятно, еслиб была возможность верстать этот кусок с дивами, то и невозникло бы этой темы. Суть в том, что пользователь должен в редакторе набрать заголовок, присвоить ему стиль "заголовок 2" и все оформилось по чудному мгновенью. А добавлять дивы вокруг, это решение только лишь для статического сайта.

А подправить редактор так чтобы юзер в редакторе набрать заголовок, присвоил ему стиль "заголовок 2" и текст обернулся не просто тегом <h2></h2>, а например <div class="heading"><h2></h2></div> получится?

Edited May 25, 2010 by mishka2

[TheKIP]

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