如何在 Bootstrap Jumbotron 中垂直居中容器？

Bootstrap 中 Jumbotron 内容器的垂直对齐

Bootstrap 中 Jumbotron 内容器的垂直对齐可以通过多种方法实现，具体取决于需要浏览器支持。

现代方式

使用Flexbox

对于支持Flexbox的现代浏览器，更直接和一致的方法是使用Flexbox布局模型。通过将以下 CSS 添加到您的页面：

.vertical-center {
  display: flex;
  align-items: center;
}

您可以轻松地将容器在大屏幕中垂直居中。确保用类为“.vertical-center”的 div 包围容器。

老式方式

对于较旧的浏览器

对于缺乏 Flexbox 支持的浏览器，涉及垂直对齐的网络标准技术需要付出更多的努力。利用 text-align: center 属性将子元素在父元素内水平对齐。创建一个最初被 display: none 隐藏的 div 元素，其高度等于或小于父元素。现在，在所需元素（如容器）上使用vertical-align 来操纵对齐方式。

.vertical-center {
  text-align: center;
  font: 0/0 a;
}

.vertical-center .hidden-child {
  display: none;
  height: 100%;
}

.vertical-center.aligned .hidden-child {
  display: inline-block;
  vertical-align: middle;
}

在容器内，添加一个 display: inline-block;属性以及 Vertical-Align: middle;来实现垂直居中。请注意，这涉及一些额外的标记来模仿 Flexbox 的效果。

浏览器注意事项

请记住，Internet Explorer 8 和 9 无法正确解释内联块技术，需要替代解决方案。

以上是如何在 Bootstrap Jumbotron 中垂直居中容器？的详细内容。更多信息请关注PHP中文网其他相关文章！