Angulaire Matériel façon de faire une ligne horizontale avec word dans le milieu

À l'aide de Angulaire Du Matériel, je suis en train de créer une ligne horizontale avec un mot dans le milieu. Quelque chose d'assez semblable à celui affiché ici.

J'ai essayé et c'est proche, mais j'aimerais que les lignes soient alignés verticalement au milieu du mot ou.

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

Je suppose, j'ai besoin de style <hr>'s de gauche et de droite. Comment puis-je améliorer ce code et de rester dans les voies de l'Angulaire de Matériel?

Double - stackoverflow.com/questions/23584120/...

OriginalL'auteur Christiaan Westerbeek | 2015-05-25

  1. 8

    Une belle façon de le faire est d'utiliser le layout="row" avec flex.

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

    JS fiddle l'application de cette idée pour le texte du bouton: http://jsfiddle.net/a7m6xrwy/1/

    Vous pouvez définir le style de la rh de l'attribut avec le css. Le md-diviseur de la directive n'est pas destiné à être utilisé de cette façon, alors il n'y a aucune raison d'essayer et de le forcer. Si vous souhaitez utiliser une directive pour résoudre ce problème, vous devez écrire votre propre md-diviseur de la directive qui prend le texte à afficher en tant que paramètre.

    OriginalL'auteur soote

  2. 1

    Pour les personnes utilisant angulaire matériel 2 et flex-mise en page, voici ma solution. Pas tout à fait satisfaisante, mais il fait l'affaire.

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

    OriginalL'auteur David Bulté