Question

我正在使用angualar和有角度的材料，我正在努力创造一些这样的东西 - ＆gt; http://gyazo.com/51b99edb716687f6096e4cff7d009e8d

但由于某种原因，我的图像（徽标）延伸到宽度，这就是我现在所拥有的 - ＆gt; http://gyazo.com/277f2bcf6b47861412d8e5df949d8313 我甚至无法在屏幕中间看到它

如果任何人可以帮助我并让我使用这个弹性盒模型我会很感激

这是我的代码：

<div layout="row" flex layout-padding layout-fill layout-align="center center">
    <div flex="40" flex-lg="50" flex-md="70" flex-sm="100">
        <md-card>
            <md-toolbar>
                <div>
                    <div><img src="../images/logo.png" alt="Zazzle logo"></div>
                    <h1 class="md-headline">
                    Sign up 
                    </h1>
                </div>
            </md-toolbar>
        </md-card>
    </div>
</div>

Answer 1

要将某个内容添加到div并添加layout="row"，并在div中添加<span flex></span>，然后在您尝试居中的div之前和之后添加<div layout="row"> <span flex></span> <div class="well" flex='30'> <form ng-submit="vm.login()" name="loginForm"> <md-input-container> <label>Email</label> <input type="text" ng-model="vm.email" required/> <div ng-messages="loginForm.email.$error" ng-if='loginForm.email.$dirty'> <div ng-message="required">This is required.</div> </div> </md-input-container> <md-input-container> <label>Password</label> <input type="password" ng-model="vm.password"/> </md-input-container> <md-button type="submit" class="md-raised md-primary">Submit</md-button> </form> </div> <span flex></span> </div>。

这是我为登录页面设置输入div的中心的方法。我仍在努力学习自己，所以我不确定这是不是正确的方法，但你肯定可以尝试一下：

{{1}}

希望这会有所帮助：）

Angular Materials flex box模型无法正确应用

1 个答案: