Question

我想在用户导航到屏幕时垂直对齐我的屏幕，无论屏幕尺寸如何，我都希望能够向下滚动并且不随屏幕一起移动我想尽可能使用内联样式

<div class="jumbotron text-center">
            <h1>Search Form Here</h1>
        </div>

Answer 1

你可以在没有jQuery的情况下做到这一点。首先将jumbotron放入包装纸中：

<div class="wrapper">
    <div class="jumbotron text-center">
        <h1>Search Form Here</h1>
    </div>
</div>

然后使用vh单位使包装器成为视口的整个高度：

.wrapper {
    position: relative;
    height: 100vh;
}

最后，使用绝对定位和变换使jumbotron居中：

.jumbotron {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

您可以制作所需的jumbotron和高度和宽度，它始终位于容器的中心位置。所有这些样式都可以是内联的，只需将它们移动到各自DIV上的样式属性即可。这些价值永远不需要改变。

Answer 2

我使用CSS Flexbox解决了这个问题。没有Javascript或jQuery。

这是我的代码，我添加了课程vertical-center然后在CSS文件中 -

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

您可以在 - http://codepen.io/jjmax/full/avdVBE

中查看此示例

Answer 3

您可以使用jQuery，顺便提一下，创建内联CSS。

您的HTML以及包含div：

的内容

<div class="wrapper">
    <div class="jumbotron text-center">
        <h1>Search Form Here</h1>
    </div>
</div>

jQuery函数：

function myJumbotron() {
    var winHeight = $(window).height();
    // make wrapper div whole height of window
    $('.wrapper').css({
        height: winHeight
    });
    // make jumbotron be in the middle vertically
    $('.jumbotron').css({
        marginTop: (winHeight / 2) + 'px'
    });
}

准备文件时调用功能：

$(document).ready(function() {
    myJumbotron();
});

垂直对齐jumbotron

3 个答案: