Angular Material制作水平线的方法，中间有单词

Posted 2023-03-06

【中文标题】Angular Material制作水平线的方法，中间有单词

【英文标题】：Angular Material way of making a horizontal line with word in the middle

【发布时间】：2015-08-07 08:35:19

【问题描述】：

使用Angular Material，我正在尝试创建一条中间有一个单词的水平线。与here 显示的内容非常相似。

我试过了，它很接近，但我希望线条垂直对齐到单词 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/

我想，我需要为<hr> 左右设置样式。如何改进此代码并保持 Angular Material 的方式？

【问题讨论】：

可能重复 - ***.com/questions/23584120/…

【参考方案1】：

这就像一个魅力。

<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：您可以将内联样式提取到有意义的 CSS 类中。为简洁起见，此处避免使用它。

输出：

【参考方案2】：

这是使用材料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;

结果将如下所示：

【参考方案3】：

对于使用角材料 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>

【参考方案4】：

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

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

JS fiddle 将此想法应用于按钮文本：http://jsfiddle.net/a7m6xrwy/1/

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