angularjs材质卡（md-card）如何垂直和水平居中？ （角度 1.x）

Posted 2023-03-05

【中文标题】angularjs材质卡（md-card）如何垂直和水平居中？ （角度 1.x）

【英文标题】：How center a angularjs material card (md-card) vertically and horizontally? (Angular 1.x)

【发布时间】：2016-12-30 16:01:08

【问题描述】：

我有一个问题，我肯定有一个我找不到的简单解决方案。我正在构建一个简单的登录页面，其中我有一个角度材料卡（md-card），仅此而已。在它里面我有这种情况下的正常字段。

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

有人有一个简单的例子来说明如何在视图中仅将 md-card 居中？

【问题讨论】：

请更改标题，以获取谷歌搜索结果:)

【参考方案1】：

您可以尝试设置元素的尺寸，然后添加：

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

它应该水平居中。

【讨论】：

谢谢，但这对我不起作用。我不明白为什么这段代码：<div layout="column" layout-align="center none"> Sample </div> 不起作用，我看不到“样本”垂直居中。

这为我修好了。

【参考方案2】：

给你 - CodePen

列居中 行居中，flex="50" 卡片，flex="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>

【讨论】：

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

@JuanAntonio 很高兴能帮上忙。我刚刚添加了flex=50 以获取更多信息。

【参考方案3】：

最后，我找到了一个简单的方法：

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

【讨论】：

您必须导入什么才能访问layout-fill？

这个答案比较完整：***.com/questions/45212473/…

感谢@Pier 的链接