Angular Material在中间用单词制作水平线的方法

Question

使用Angular Material,我正在尝试创建一个水平线,中间有一个单词.与此处显示的非常相似的东西.

我试过这个并且它很接近,但我希望这些线垂直对齐到单词的中间或.

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

我猜,我需要左右风格<hr>.如何改进此代码并保持Angular Material的方式？

Answer 1

一个很好的方法是使用layout ="row"和flex.

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

JS小提琴将这个想法应用于按钮文本:http://jsfiddle.net/a7m6xrwy/1/

您可以使用css设置hr属性的样式.md-divider指令不应该以这种方式使用,因此没有理由尝试强制它.如果您希望使用指令来解决此问题,则必须编写自己的md-divider指令,该指令将显示文本作为参数.

Answer 2

对于使用 angular material 2 和flex-layout 的人，这是我的解决方案。不完全令人满意，但它确实有效。

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

Answer 3

这是使用材料的解决方案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;
}

结果将如下所示：