将div垂直对齐到元素的中间 [英] Vertically align div to middle of element

问题描述

因此，基本上，我希望页面看起来像这样。徽标（绿色三角形）为 images / logo.png，其他三个框为用户名输入/密码输入/提交按钮。

So basically, I want my page to look like this. The logo (green triangle) is "images/logo.png", and the three other boxes are Username input/Password input/Submit button.

我尝试过的代码不起作用-它将所有内容压缩在页面的左侧。

The code I have tried does not work - it squashes it all up on the left side of the page.

 <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>

我在做什么错了？

谢谢

推荐答案

让我们假设您的父母元素是100％<$ c视口的高度$ c>高度和宽度宽度。

Let's assume your parent element is 100% height and width of the viewport.

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

You can easily vertically align any element, if you don't mind using the transform property, with a few lines of code.

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

您可以输入利润：0自动； 如果您也想使其水平对齐（并且它是块类型元素）。

You can throw in a margin: 0 auto; if you want to horizontally align it as well (and it is a block type element).

在这里拨弄

要将其应用于您的代码：

To apply it to your code:

• 确保登录框的父级是 100％ 高度和宽度。


• 将上述样式应用于登录框类。

• Make sure the parent of login-box is the element with 100% height and width.
• Apply the above styles to the login-box class.

这篇关于将div垂直对齐到元素的中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！