Угловой способ создания горизонтальной линии со словом в середине

Question

Используя Angular Material, я пытаюсь создать горизонтальную линию со словом посередине. Что-то очень похоже на отображаемое here.

Я пробовал это, и это близко, но я хотел бы, чтобы линии были выровнены по вертикали до середины слова или.

<div layout="row" layout-align="center start"> 
    <md-divider flex></md-divider> 
    <div style="flex: 0 1 auto;">or</div> 
    <md-divider flex></md-divider> 
</div> 

http://jsfiddle.net/devotis/a7m6xrwy/

Я думаю, мне нужно в стиле <hr> «s влево и вправо. Как я могу улучшить этот код и оставаться в рамках метода Углового материала?

Answer 1

Хороший способ сделать это - использовать layout = "row" вместе с flex.

<span layout="row"><hr flex/>or<hr flex/></span> 

JS скрипка применение этой идеи к тексту кнопки: http://jsfiddle.net/a7m6xrwy/1/

Вы можете стилизовать атрибут ч с помощью CSS. Директива md-divider не предназначена для использования таким образом, поэтому нет причин пытаться ее заставить. Если вы хотите использовать директиву для решения этой проблемы, вам придется написать свою собственную директиву md-divider, которая отображает текст в виде параметра.