【问题标题】: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】:

    如果您可以为&lt;p&gt; 标签设置一个固定宽度,那么这应该可以:

    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。但现在它可以工作了。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-05-28
      • 2017-10-31
      • 1970-01-01
      • 2017-06-18
      • 2015-08-07
      • 2016-10-11
      • 1970-01-01
      • 2023-04-10
      相关资源
      最近更新 更多