帶引導程序的按鈕垂直對齊

作爲一個整體，我對網絡開發很新穎，我花了很多時間在網上查找這個解決方案，但我似乎無法找到一個可以在我嘗試時使用的解決方案。帶引導程序的按鈕垂直對齊

基本上，我有一個jumbotron垂直響應，所以高度始終是100％。我有一個垂直和水平對齊的文本塊，以便它始終位於大臂的中心。

我的問題是試圖添加一個按鈕，也是響應式的，並始終垂直對齊在jumbotron的底部。如果我使用與用於對齊文本的代碼相同的代碼，並更改偏移百分比以便按鈕應位於底部，則該按鈕將顯示在正確的位置，但在調整瀏覽器大小時不會響應，除非我刷新！

這裏是我的CSS部分代碼：

html, body{ 
     height: 100% 
} 

.jumbotron{ 
     height: 100% 
} 

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

和HTML段雲：

<div class="jumbotron text-center"> 
     <h1 class = "middle"> This text works fine </h1> 
     <button type = "button" class = "btn btn-primary middle"> This button doesn't work 
     </button> 
</div>

有趣的是，該按鈕將其自身置於正確的位置，每當我刷新頁面，但如果我垂直調整瀏覽器的大小，文本將切換到正確的垂直對齊方式，但按鈕保持不變。

有誰知道如何解決這個問題/一個更好的方法來處理垂直對齊？

來源

2016-03-24 user1888863

當我運行上面的代碼時，我發現了預期的行爲。查看jsfiddle https://jsfiddle.net/naga2raja/chm1hv0b/embedded/result/在這裏，讓我知道你需要什麼 – Naga2Raja

@ Naga2Raja代碼現在似乎也適合我。之前出於某種原因，當我調整瀏覽器大小時，按鈕不會重新排列，但現在它確實......有趣 – user1888863

給定的代碼似乎有預期的行爲。

No change in code

小提琴演示在這裏：Demo Code

嘗試清除瀏覽器緩存，再重新檢查。

來源

2016-03-24 03:19:18 Naga2Raja

帶引導程序的按鈕垂直對齊

回答

相關問題