7

我制作了一个注册脚本，允许用户注册我的网站。现在我遇到的问题是注册界面所在的角度材料卡不在中心。我已经尝试了很多东西<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>
4

2 回答 2

4

添加

layout-align="center center"

到外面。

见http://codepen.io/anon/pen/vGewVG

于 2016-04-03T23:18:50.750 回答
0

您没有</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

这里是repository

于 2016-04-03T05:09:49.357 回答