如何将angularjs物料卡(md-card)垂直和水平居中? (角度1.x) [英] How center a angularjs material card (md-card) vertically and horizontally? (Angular 1.x)

问题描述

我有一个问题，我敢肯定会有一个我找不到的简单解决方案.我正在构建一个简单的登录页面，其中有一个角形材料卡(md卡)，仅此而已.在这种情况下，我里面有普通字段.

I've a problem I'm sure would had a simple solution that I don't find. I'm building a simple login page where I've a angular material card (md-card) and nothing more. Inside it I've the normal fields in this cases.

但是当我尝试将此卡垂直和水平居中时，问题似乎出现了，这似乎是不可能的.我已经看过 doc 关于此问题，这将非常简单易用 layout="row" layout-align="center center"，但显然对我不起作用.我在Codepen和plunker中搜索了几个示例，但没有人使用md卡来做到这一点.

But the problem appear when I try to center this card vertically and horizontally, it's seem imposible. I've seen the doc about this and this would be so simple as use layout="row" layout-align="center center"but obviusly don't work for me. I searched several examples in codepen and plunker but nobody do this with md-card.

有人举了一个简单的示例，说明如何仅在视图中居中放置md卡?

Somebody have a simple example to how center only a md-card in a view?

推荐答案

最后，我找到了一种简单的方法:

Finally, I found a simple way to do this:

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

这篇关于如何将angularjs物料卡(md-card)垂直和水平居中? (角度1.x)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！