如何在 Angular Material 2 中对齐中心 md-hint？答案

【问题标题】：How to align to center md-hint in Angular Material 2?如何在 Angular Material 2 中对齐中心 md-hint？
【发布时间】：2018-02-19 20:25:11
【问题描述】：

我的sn-p。

<md-hint>About</md-hint>
<p data-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

查看

如何使 md-hint 居中对齐？卡了一段时间..

更新

我用 css 的方式。这是我要避免做的事情。如果您知道解决此问题的 angular material2 方法，请提供帮助。

【问题讨论】：

标签： html angular angular-material2

【解决方案1】：

你可以试试这个：

<div [style.text-align]="'center'"><md-hint>About</md-hint></div>

【讨论】：

然后给它上课？
哦，等等，我以为你是在使用它来输入的。让我编辑我的帖子。
给你，试试这个！
少即是多！很高兴我能提供帮助，记得将问题标记为已解决！
确定__________

【解决方案2】：

如果您可以为<p> 标签设置一个固定宽度，那么这应该可以：

CSS：

.my-class{
  display:flex;
  width:300px;
  flex-direction:column;
  justify-content:center;      
}
::ng-deep .mat-hint{
  width:100% !important;
  text-align:center !important;
}

HTML

 <div class="my-class">
    <p data-text>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <md-hint>About</md-hint>
</div>

DEMO

由于ng-deep 可能很快就会被弃用，您可以考虑在组件装饰器中添加 encapsulation.None 并删除 ::ng-deep。但现在它可以工作了。

【讨论】：