垂直对齐div元素的中间

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

我试图不工作的代码 - 这南瓜这一切在页面的左侧。

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

我在做什么错？

感谢

来源

2015-10-29 b85411

让我们假设你的父母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类。

来源

2015-10-29 03:06:48 justinw

谢谢，这是做到了。 – b85411

我已经创建了一些虚拟数据example demo但你会得到的想法如何实现它

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

来源

2015-10-29 02:42:10

这样做可以垂直对齐，但它仍然全部被压扁并左对中。看到这个图片：http://postimg.org/image/r4fqdajfr/ - 感谢您的帮助我欣赏它:) – b85411

@ b85411我没有访问您使用的图像，所以只有我可以为你从你的代码。创建一个jsfiddle与您的图像和输入字段，我可以帮助你在这更多 –

这只是一个144x144 PNG – b85411

你可能会考虑使用COL-SM-偏移改变位置你的形象和你的领域。尝试：

使用“col-sm-offset-x”播放，直到您将其正确定位。

来源

2015-10-29 02:50:31

我想到了，但我不知道它如何帮助他垂直对齐中心？ –

垂直对齐div元素的中间

回答

相关问题