Текст в линии или как победить дизайнера

  • Tutorial

Всем привет



Каждому верстальщику хотя бы раз приходилось сталкиваться с задачей размещения текста внутри лини.
Например вот так:

image

Никогда не возникает проблем, если фон однотонный. Но что делать, если фоном является картинка как в данном примере?
Я предлагаю выношу на Ваш суд следующее решение. Возможно кто-то предложит дополнения или сделает замечания, я только ЗА.

Пример: ссылка

Суть решения в следующем:

— делаем обёртку с фоновым изображением и делаем ей overflow-hidden (чтобы скрыть лишние части линий)
— внутри вставляем обёртку для заголовка в которой центрируем текстовый блок (text-align :center)
— блоку в котором текст делаем относительное позиционирование (position: relative) и display:inline-block
— внутрь блока с текстом кладём две линии, например теги
— каждой из линий делаем positon: absolute, заведомо большую ширину(например 1000% от родительского блока) и top:(X)px (для выравнивания линии по центру текста)
— потом поочерёдно позиционруем линии на 100% влево для правой линии и вправо для левой
— отступы от текста до линий делаем внутренними отступами padding.

Жду Ваших ответов.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 10

    0
    А что мешает объединить первые два блока? В вашем примере див some_block только и делает, что задает центрирование текста, которое уже есть в some_wrapper. Можете подробнее объяснить, чем обоснован этот лишний элемент?
      0
      Согласен. Для some_wrapper центрирование не нужно(упустил). some_wrapper предполагается как родительский блок в котором могут располагаться элементы помимо some_block.
    • UFO just landed and posted this here
        +3
        Согласен. Гореть мне в аду за ранее придуманный велосипед.
        0
        При изменении размера шрифта надо менять top у линий. Не эффективно. Мне первое что пришло в голову после прочтения заголовка. Это сделать три блока внутри одного дива, у двух крайних сделать бекграунд отцентровать по высоте. в среднем текст. тогда можно не заботиться о том какого размера шрифт. P.s. как быстро генерировать такого рода беки и конвертить их в base64 есть уже много статей на хабре.
        • UFO just landed and posted this here
            +1
            Ещё лучше top: 50% + отрицательный margin-top на половину высоты элемента (а то вдруг текста на две строки станет или ещё что-нибудь)
          +7
          Я пользуюсь таким способом jsfiddle.net/VsMcN/
            0
            Четк. Я даж не сразу понял как оно работает. Но получилось красиво
            +3
            Я бы сделал как 2 отдельные линии, использовав ::before и ::after с абсолютным позиционированием.

            Only users with full accounts can post comments. Log in, please.