Angular Material way to create horizontal line with word in middle
Using Angular Material I am trying to create a horizontal line with a word in the middle. Something similar to the image displayed here .
I've tried this and it's close, but I would 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 think I need <hr>
left and right styling . How can I improve this code and stay in the Angular Material path?
source to share
A good way to do this is to use layout = "row" along with flex.
<span layout="row"><hr flex/>or<hr flex/></span>
JS fiddle applying this idea to button text: http://jsfiddle.net/a7m6xrwy/1/
You can create hr attribute using css. The md-divider directive is not meant to be used this way, so there is no reason to try to force it. If you want to use a directive to solve this problem, you will have to write your own md-divider directive that displays the text as a parameter.
source to share
For people using angular material 2 and flex-layout , here is my solution. Not entirely satisfying, 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>
source to share
Here is a solution using stuff 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:
source to share