如何垂直和水平放置角度材料卡（md卡）？ [英] How center a angular material card (md-card) vertically and horizontally?

问题描述

我有一个问题，我确信会有一个我找不到的简单解决方案。我正在建立一个简单的登录页面，在那里我有一个角度材料卡（md-card），仅此而已。在这种情况下，我已经有了正常的字段。

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.

但是，当我试图将这张卡垂直和水平放置时，问题就出现了，这似乎是不可能的。我已经看到文档，这很简单，只需使用
layout =rowlayout-align =center center但很明显不适合我。我在codepen和plunker中搜索了几个例子，但没有人用md-card来做这件事。

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卡？ / p>

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>

这篇关于如何垂直和水平放置角度材料卡（md卡）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！