将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%$ c的元素$ c>
高度
和宽度
。 - 将上述样式应用于
登录框
类。
- Make sure the parent of
login-box
is the element with100%
height
andwidth
. - Apply the above styles to the
login-box
class.
这篇关于将div垂直对齐到元素的中间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!