- PVSM.RU - https://www.pvsm.ru -
Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:
Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.
Пример: ссылка [1]
Суть решения в следующем:
— делаем обёртку с фоновым изображением и делаем ей overflow-hidden (чтобы скрыть лишние части линий)
— внутри вставляем обёртку для заголовка в которой центрируем текстовый блок (text-align :center)
— блоку в котором текст делаем относительное позиционирование (position: relative) и display:inline-block
— внутрь блока с текстом кладём две линии, например теги <i></i>
— каждой из линий делаем positon: absolute, заведомо большую ширину(например 1000% от родительского блока) и top:(X)px (для выравнивания линии по центру текста)
— потом поочерёдно позиционруем линии на 100% влево для правой линии и вправо для левой
— отступы от текста до линий делаем внутренними отступами padding.
Жду Ваших ответов.
Автор: BOLTIKUS
Источник [2]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/37135
Ссылки в тексте:
[1] ссылка: https://dl.dropboxusercontent.com/u/69878967/habr_line/index.html
[2] Источник: http://habrahabr.ru/post/184274/
Нажмите здесь для печати.