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

问题描述

我遇到了一个问题，我确信会有一个我找不到的简单解决方案.我正在构建一个简单的登录页面，其中有一张有角度的材料卡(md-card)，仅此而已.在这种情况下，我在里面有正常的字段.

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

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

解决方案

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

<div layout="row" layout-align="center none"><md-card><md-card-title><md-card-title-text><span class="md-headline">卡片标题</span></md-card-title-text></md-card-title><md-card-content>卡片内容</md-card-content></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.

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.

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