CODEWITHSUNDEEP
cssangularjsangular-material
Christiaan Westerbeek
Christiaan Westerbeek

Reputation: 11137

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

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?

Upvotes: 9

Views: 44981

Answers (4)

sangeethapradeep
sangeethapradeep

Reputation: 131

This would work like a charm.

<mat-divider style="width: 40%; display: inline-block;"></mat-divider>
<span style="padding: 20px; font-weight: 500;">Or</span>
<mat-divider style="width: 40%; display: inline-block;"></mat-divider>

PS: You may extract the inline styles into meaningful CSS classes. Avoided it here for brevity.

Output:

Output

Upvotes: 0

rkrishnan
rkrishnan

Reputation: 806

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:

enter image description here

Upvotes: 11

David Bult&#233;
David Bult&#233;

Reputation: 3109

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>

Upvotes: 6

soote
soote

Reputation: 3260

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.

Upvotes: 11

Related Questions