垂直對齊與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面板

回答

相關問題