Angular Material way of making a horizontal line with word in the middle

Question

Using Angular Material, I'm trying to create a horizontal line with a word in the middle. Something pretty similar to the one displayed here.

I've tried this and it's close but I'd like the lines to be vertically aligned to the middle of the word or.

<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/

I guess, I need styled <hr>'s left and right. How can I improve this code and remain within the ways of Angular Material?

Answer 1

A nice way to do it is to use the layout="row" along with flex.

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

JS fiddle applying this idea to the button text: http://jsfiddle.net/a7m6xrwy/1/

You can style the hr attribute with css. The md-divider directive isn't meant to be used this way, so there is no reason to try and force it. If you wish to use a directive to solve this issue, you will have to write your own md-divider directive which takes the display text as a parameter.

Answer 2

Here is a solution using material's mat-divider:

<h1>Divider with text</h1>

<div class="container">
  <div class="line"><mat-divider></mat-divider></div>
  <div class="text mat-typography">Hey there</div>
  <div class="line"><mat-divider></mat-divider></div>
</div>

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  flex: 1;
}

.text {
  padding-left: 10px;
  padding-right: 10px;
}

The result will look like this:

Answer 3

For people using angular material 2 and flex-layout, here's my solution. Not entirely satisfactory, but it does the trick.

<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
  <mat-divider fxFlex="1 0"></mat-divider>
  <div>or</div>
  <mat-divider fxFlex="1 0"></mat-divider>
</div>