css - 在中间用单词制作一条水平线的 Angular Material 方式

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

here
我想，我需要左右两边的样式。我如何改进这个代码，并保持在角度材料的方式？

最佳答案

一个很好的方法是与flex一起使用layout=“row”。

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

js fiddle将此思想应用于按钮文本：http://jsfiddle.net/a7m6xrwy/1/
您可以使用css设置hr属性的样式。md divider指令不是这样使用的，因此没有理由尝试强制它。如果希望使用指令来解决此问题，则必须编写自己的md divider指令，该指令将显示文本作为参数。