垂直和水平如何居中角材料卡（md卡）？

我有一个问题，我确定会有一个简单的解决方案，我没有找到。我正在建立一个简单的登录页面，在那里我有一个角度材料卡（md-card），仅此而已。在它里面，我在这种情况下是正常的字段。垂直和水平如何居中角材料卡（md卡）？

但是，当我试图垂直和水平居中这张卡片时，问题就出现了，这似乎是不可能的。我已经看到doc关于这一点，这将是如此简单，使用 layout="row" layout-align="center center"但很明显不适合我。我在codepen和plunker中搜索了几个例子，但是没有人用md-card这样做。

有人有一个简单的例子，如何在视图中只有一张md卡？

来源

2016-08-23 Juan Antonio

最后，我发现了一个简单的方法来做到这一点：

<div layout-fill layout="column" layout-align="center none"> 
    <div layout="row" layout-align="center none"> 

     <md-card> 

      <md-card-title> 
       <md-card-title-text> 
        <span class="md-headline">Card title</span> 
       </md-card-title-text> 
      </md-card-title> 

      <md-card-content> 
       Card content 
      </md-card-content> 

     </md-card> 
    </div> 
</div>

来源

2016-08-23 19:53:46

你需要导入什么才能访问'layout-fill'？ –

https://material.angularjs.org/latest/layout/introduction – gtzinos

你可以通过设置元素的尺寸，然后将尝试：

margin-left: auto; 
margin-right: auto;

应该水平居中这一点。

来源

2016-08-23 18:11:30

谢谢，但这个并不为我工作。我不明白为什么这个代码： '

Sample

' 不工作，我没有看到垂直“示例”中心。 –

这为我修好了。 – Kirby

在这里你去 - CodePen

列居中
- 行的中心，柔性= “50”
  - 卡，柔性= “50”

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:green" layout-align="center"> 
    <div flex="50" layout="row" layout-align="center"> 
     <md-card flex="50"></md-card> 
    </div> 
</div>

来源

2016-08-23 19:43:15

我只是找到了一个类似的方法来做到这一点，但没有'flex =“50”'。谢谢！ –

@JuanAntonio很高兴能有所帮助。我只是增加了'flex = 50'来获取更多信息。 –

垂直和水平如何居中角材料卡（md卡）？

回答

相关问题