горизонтальная линия через заголовок

[cyklop77]

помогите пожалуйста решить проблему

 

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

 

подскажите пожалуйста правильный способ вёрстки подобного заголовка

 

ps

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

Edited November 30, 2013 by cyklop77

[mrnobody]

Я правильно понял?

http://jsfiddle.net/mrnobody/pMf2A/15/

Fullscreen: http://jsfiddle.net/mrnobody/pMf2A/15/embedded/result/

Edited November 30, 2013 by mrnobody

[swandev]

может так http://jsbin.com/IDiViYON/1/edit

[mrnobody]

может так http://jsbin.com/IDiViYON/1/edit

А если задний фон не однородный?

[cyklop77]

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

Edited November 30, 2013 by cyklop77

[swandev]

 

может так http://jsbin.com/IDiViYON/1/edit

А если задний фон не однородный?

 

 

Ну если фон не однородный то, да, мой вариант не подходит.

 

В другом случае, вполне нормальный вариант)

[cyklop77]

Я правильно понял?

http://jsfiddle.net/mrnobody/pMf2A/15/

Fullscreen: http://jsfiddle.net/mrnobody/pMf2A/15/embedded/result/

в этом коде мне остался непонятен только один момент, поясните пожалуйста если не трудно

 

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

span:before, span:after {margin: auto;}

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

Edited November 30, 2013 by cyklop77

[Zverushka]

Мне вот тоже интересно - такой трюк с вертикальных выравниваем - он везде сработает (в любых браузерах)? А то я как-то по старинке top: 50% margin-top: -1px;

[SelenIT]

как я понимаю, это достигается за счёт span:before, span:after { margin: auto; }

Да, в сочетании с фиксированными top, bottom и height и — главное — абсолютным позиционированием. В силу п. 10.6.4 спеки:
 

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

 

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высоте содержащего блока

 

...

 

Если ни одно из трех свойств 'top', 'height' и 'bottom' не auto: если 'margin-top' и 'margin-bottom' оба 'auto', решить уравнение с дополнительным условием, что оба margin-а равны

 

Не работает, судя по всему, только в IE7-.