将Angular Material卡片居中对齐于页面

Question

我制作了一个注册脚本，允许用户在我的网站上注册。现在我遇到的问题是，包含注册界面的angular材料卡片不在中心位置。我尝试了很多方法，包括<center>和[layout-align="center center"]，但仍然没有任何作用。

我的代码：

<md-content class="md-padding" layout-xs="column" layout="row">
    <div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
        <md-card class="card-40-center">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Sign Up</span>
                </md-card-title-text>
            </md-card-title>
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
            <div class="md-padding" layout-align="center">
                <div layout="row">
            <md-input-container flex="100">
                <label>First name</label>
                <input>
            </md-input-container>
                <md-input-container flex="100">
                    <label>Last name</label>
                    <input>
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Username</label>
                    <input>
                </md-input-container>
                <md-input-container flex="100">
                    <label>Email</label>
                    <input type="email">
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Password</label>
                    <input type="password">
                </md-input-container>
                <md-input-container flex="100">
                    <label>Repeat Password</label>
                    <input type="password">
                </md-input-container>
                    </div>
                <div ng-controller="selectGender as ctrl">
                    <div layout="row">
                    <md-input-container flex="100" layout="column" layout-align="center">
                        <label>Gender</label>
                        <md-select ng-model="ctrl.userState">
                            <md-option
                                ng-repeat="state in ctrl.states"
                                value="{{state.abbrev}}"
                                ng-disabled="$index === 2"
                            >
                                {{state.abbrev}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                        <div ng-controller="selectDate">
                            <div flex="100">
                                <md-datepicker
                                    ng-model="myDate"
                                    md-placeholder="Enter date"
                                ></md-datepicker>
                            </div>
                        </div>
                        </div>

                </div>
            </div>

            <md-card-actions layout="row" layout-align="center">
                <br>
                <center>
                    <md-button class="md-primary md-raised signup_button" type="submit">Sign Up</md-button>

                </center>
                </form>
            </md-card-actions>
            <md-card-content>

            </md-card-content>

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

- Puru Vijay

Answer 1

添加

layout-align="center center"

到外部去。

查看http://codepen.io/anon/pen/vGewVG

- sdfacre

Answer 2

您没有在正确的位置关闭</form>标签，

  <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
            <div class="md-padding" layout-align="center">
                <div layout="row">
            <md-input-container flex="100">
                <label>First name</label>
                <input>
            </md-input-container>
                <md-input-container flex="100">
                    <label>Last name</label>
                    <input>
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Username</label>
                    <input>
                </md-input-container>
                <md-input-container flex="100">
                    <label>Email</label>
                    <input type="email">
                </md-input-container>
                    </div>
                <div layout="row">
                <md-input-container flex="100">
                    <label>Password</label>
                    <input type="password">
                </md-input-container>
                <md-input-container flex="100">
                    <label>Repeat Password</label>
                    <input type="password">
                </md-input-container>
                    </div>
                <div ng-controller="selectGender as ctrl">
                    <div layout="row">
                    <md-input-container flex="100" layout="column" layout-align="center">
                        <label>Gender</label>
                        <md-select ng-model="ctrl.userState">
                            <md-option
                                ng-repeat="state in ctrl.states"
                                value="{{state.abbrev}}"
                                ng-disabled="$index === 2"
                            >
                                {{state.abbrev}}
                            </md-option>
                        </md-select>
                    </md-input-container>
                        <div ng-controller="selectDate">
                            <div flex="100">
                                <md-datepicker
                                    ng-model="myDate"
                                    md-placeholder="Enter date"
                                ></md-datepicker>
                            </div>
                        </div>
                        </div>

                </div>
            </div>
            </form>

请查看Plunker

这里是代码库

- Sajeetharan

---

我不在乎我关闭了哪个标签以及在哪里。Chrome可以轻松纠正这一点。我要寻找的是将卡片居中对齐，但不是其中的内容。 - Puru Vijay

你的卡片在整个屏幕上扩展，而我的很小，我想把它放在页面中央。这是我的当前卡片：http://prntscr.com/anhb7k - Puru Vijay

我在Git上创建了一个代码库，请查看https://github.com/sajeetharan/MaterialLoginPage - Sajeetharan

你检查过代码库了吗？ - Sajeetharan