作为一个整体,我对网络开发还很陌生,我花了很多时间在网络上寻找解决方案,但我似乎无法在尝试时找到有效的解决方案。
基本上,我有一个垂直响应的超大屏幕,因此高度始终为 100%。我有一个垂直和水平对齐的文本 block ,因此它始终位于超大屏幕的中心。
我的问题是尝试添加一个按钮,该按钮也具有响应性并且始终垂直对齐在超大屏幕的底部。如果我使用与对齐文本相同的代码,并更改偏移百分比以使按钮位于底部,则该按钮会显示在正确的位置,但在我调整浏览器大小时不会响应,除非我刷新!
这是我的 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>
有趣的是,每当我刷新页面时,按钮都会将自己放置在正确的位置,但如果我垂直调整浏览器的大小,文本会移动到正确的垂直对齐方式,但按钮保持不变。
有谁知道如何解决这个问题/更好的方式来处理垂直对齐?
最佳答案
关于css - Bootstrap 按钮的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36191693/