CSS垂直居中使用Twitter引導

-3

有人可以幫助我，並試圖解釋他們把垂直居中我的例子的代碼？這將是一個極端的幫助，我會非常感激！CSS垂直居中使用Twitter引導

我使用Twitter的引導，我需要兩列

.login-carousel-container 
.loginbox-container

我的網頁上垂直對齊。

鏈接到我現在的位置：http://kmgp.us/stackoverflow/index.html

來源

2014-04-10 Kevin M. Gilbert

這個問題似乎是題外話，因爲它缺乏足夠的信息來診斷問題。更詳細地描述你的問題，或者在問題本身中包含一個簡單的例子。 –

如何？我只是問我如何垂直對齊這兩個div？ –

使用這個小提琴來幫助：http://jsfiddle.net/n8d8X/ – Deryck

-1

您可以使用絕對定位與變換轉化爲實現這一目標。

.login-container { width:100%; max-width: 1400px; margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

這將整個容器對齊到頁面的中心。您可以添加寬度以確保容器是您想要的大小。

編輯：所以你想垂直中心的登錄框容器呢？繼承人的代碼

.loginbox-container { position: absolute; right: 0; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); }

來源

2014-04-11 00:12:37 jono

這很好！但是右邊的部分仍然不在中心。它在登錄容器頂部 –

將這些規則應用於.login容器，而不是使用.login-carousel容器 – jono

，我只是使用該代碼更新了網站上的代碼。它把所有事情都集中在一起，但類loginbox-container也是垂直居中的。 –

CSS垂直居中使用Twitter引導

回答

相關問題