在页面中心对齐角度材料卡

Posted 2023-03-05

【中文标题】在页面中心对齐角度材料卡

【英文标题】：aligning angular material card in center of the page

【发布时间】：2016-07-22 18:20:24

【问题描述】：

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

【参考方案1】：

你没有在正确的地方关闭</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

【讨论】：

我不在乎我在哪里关闭了哪个标签以及在哪里关闭。 Chrome 可以很容易地纠正这一点。我正在寻找的是居中对齐卡片，而不是其中的内容

你的在整个屏幕上展开，而我的很小，我希望它在页面的中心。我当前的名片：prntscr.com/anhb7k

我在 git 上创建了一个仓库，请查看github.com/sajeetharan/MaterialLoginPage

你检查了回购吗？

【参考方案2】：

添加

layout-align="center center"

到外面。

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

【讨论】：

像魅力一样工作