Question

所以基本上，我希望我的页面看起来像这样。徽标（绿色三角形）是“images / logo.png”，另外三个框是用户名输入/密码输入/提交按钮。

我尝试过的代码不起作用 - 它会在页面左侧压扁所有代码。

 <div class="login-box">
            <div class="row">
                <div class="col-sm-2">
                    <img src="{{ asset('images/logo.png') }}" />
                </div>
                <div class="col-sm-10">
                    <p align="center">{{ form_widget(form.username, {'attr': {'class': 'form-control', 'placeholder': 'authentication.username'|trans } }) }}</p>
                    <p align="center">{{ form_widget(form.password, {'attr': {'class': 'form-control', 'placeholder': 'authentication.password'|trans } }) }}</p>
                    <p align="center">{{ form_widget(form.log_in, {'attr': {'class': 'btn btn-lg btn-primary btn-block'}, 'label': 'authentication.log.in'|trans }) }}</p>
                </div>
            </div>
        </div>

<style>
    .login-box {
        width: 800px;
        vertical-align: middle;
    }
</style>

我做错了什么？

由于

Answer 1

假设您的父element是视口的100％height和width。

如果您不介意使用transform属性，可以使用几行代码轻松地垂直对齐任何元素。

.class {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

如果你想要水平对齐它，你可以扔margin: 0 auto;（它是一个块类型元素）。

Fiddle Here

将其应用于您的代码：

确保login-box的父级是100% height和width的元素。
将以上样式应用于login-box类。

Answer 2

我创建了一个带有一些虚拟数据的example demo但你会明白如何实现它

.col-sm-2, .col-sm-10 {
min-height: 100vh;
display: flex;
align-items : center;
}

Answer 3

您可以考虑使用col-sm-offset来更改图像和字段的位置。尝试：

<div class="col-sm-2 col-sm-offset-4">
     <img src="{{ asset('images/logo.png') }}" />
</div>
<div class="col-sm-5 col-sm-offset-6">

使用＆＃34; col-sm-offset-x＆＃34;直到你正确定位。

将div垂直对齐到元素的中间

3 个答案: