title: Angular Material way of making a horizontal line with word in the middle
body: <p>Using <a href="https://material.angularjs.org/latest/#/" rel="noreferrer">Angular Material</a>, I'm trying to create a horizontal line with a word in the middle. Something pretty similar to the one displayed <a href="https://www.pivotaltracker.com/signin" rel="noreferrer">here</a>.</p>
  
  <p>I've tried this and it's close but I'd like the lines to be vertically aligned to the middle of the word <strong>or</strong>.</p>
  
  <pre><code>&lt;div layout="row" layout-align="center start"&gt;
    &lt;md-divider flex&gt;&lt;/md-divider&gt;
    &lt;div style="flex: 0 1 auto;"&gt;or&lt;/div&gt;
    &lt;md-divider flex&gt;&lt;/md-divider&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/devotis/a7m6xrwy/" rel="noreferrer">http://jsfiddle.net/devotis/a7m6xrwy/</a></p>
  
  <p>I guess, I need styled <code>&lt;hr&gt;</code>'s left and right. How can I improve this code and remain within the ways of Angular Material?</p>