垂直对齐与CSS的对齐Bootstrap面板

我看过这里的一些文章，似乎为大多数人提供了修复，显然除了我。垂直对齐与CSS的对齐Bootstrap面板

我使用下面的CSS我website：

/* login page background */ 

body.function-login { 
display:inline-block; 
float:none; 
vertical-align:middle; 
height:100%; 
background:transparent url("http://sheqcomply.com/loginbackground.jpg") no-repeat center center fixed; 
background-size:contain; 
}

不管我怎么努力我只是不能登录框垂直页面内对齐。如果需要的话，我可以提供布局CSS和页面html，但由于它们很大，所以未包含在本文中。

当前的代码导致该

在此先感谢

来源

2016-09-15 user5641678

这是我经常使用的，当我要垂直对齐的东西，我在50％的顶级元素位置，然后把它翻译与-50％。它也适用于你，但它也取决于你在那里的其他css指令。

.function-login { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

来源

2016-09-15 12:00:35 sticksu

感谢这两个，这已经做了一些在我的网站预览，但不幸的是，在现场的网站上，它保持不变 – user5641678

垂直对齐，一个perenial的最爱。

达到此目的的一种方法是在组件周围另外设置一个div。在你的例子中，这将是container的子类col-md-6 col-md-offset-3。为此，您需要添加height: 100vh样式。为了您的实际组件的div你然后添加以下样式

position: relative; 
top: 50%; 
transform: translateY(-50%);

有可能是你需要为了得到你的背景下，“正确”的定位做小的调整，但是这应该这样做。

来源

2016-09-15 12:03:31

垂直对齐与CSS的对齐Bootstrap面板

回答

相关问题