Имеется тег H2 (генерируется CMS, да и в тексте его удобней использовать для типографики).
Дизайнером, для него заданно следующее оформление (белый шрифт, и картинка в фоне):
Проблема в том, что текст в заголовке, не всегда помещается в одну строку, и необоходимо сделать, что бы он всегда оставался по средине своего бэкграунда.
Т.е. выглядеть так:
Для этого я создал вот такой код (html я приводить не буду, т.к. он и так понятен):
В коде, я задаю line-height:40px; что бы строка была посередине и соответсвенно из за него, одна строка текста встает ровно по середине заливки (заливка высотой 40пикс), ну а вторая строка, разумеется вылазиет за её пределы. Такой метод не подходит.
Попытка отцентровать тект в бэкграунде, установкой высоты элемента height: 40px, и поставив вертикальное выравнивание vertical-align:middle, ни к чему не привела.
Если убрать line-height:40px;, и больше ничего не применять, то 2 строки, спокойно влазиют в фон, но соответсвенно когда остается одна строка, оно находится не по середине а ближе к верхнему краю.
Так вот вопрос, КАК это реализовать? И реально ли вообще? (Что бы строки всегда были по середине, не зависимо от их количества)
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
TheKIP
Имеется тег H2 (генерируется CMS, да и в тексте его удобней использовать для типографики).
Дизайнером, для него заданно следующее оформление (белый шрифт, и картинка в фоне):
Проблема в том, что текст в заголовке, не всегда помещается в одну строку, и необоходимо сделать, что бы он всегда оставался по средине своего бэкграунда.
Т.е. выглядеть так:
Для этого я создал вот такой код (html я приводить не буду, т.к. он и так понятен):
В коде, я задаю line-height:40px; что бы строка была посередине и соответсвенно из за него, одна строка текста встает ровно по середине заливки (заливка высотой 40пикс), ну а вторая строка, разумеется вылазиет за её пределы. Такой метод не подходит.
Попытка отцентровать тект в бэкграунде, установкой высоты элемента height: 40px, и поставив вертикальное выравнивание vertical-align:middle, ни к чему не привела.
Если убрать line-height:40px;, и больше ничего не применять, то 2 строки, спокойно влазиют в фон, но соответсвенно когда остается одна строка, оно находится не по середине а ближе к верхнему краю.
Так вот вопрос, КАК это реализовать? И реально ли вообще? (Что бы строки всегда были по середине, не зависимо от их количества)
Link to comment
Share on other sites
8 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.