Angular Material way of making a horizontal line with word in the middle
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.
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>
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: