Bootstrap 3 的视差图像

Question

我正在为背景构建视差效果。 示例在这里： http://codepen.io/bilalhaidar/pen/zNxOVV?editors=1100

如您所见，.container 正在折叠，因为 .caption 是绝对定位的，而 .parallax 是相对定位的。因此，文本出现在顶部而没有影响 top: 50% 设置对 .caption class.

如何让文字居中显示？

当不使用 Bootstrap classes（容器和行）时一切正常。

谢谢

Answer 1

问题是 col-xs-12 div 没有高度，列的默认 Bootstrap 样式是 position: relative 所以你的文本是相对于 div 的0 高度（因此 top: 50% 在这种情况下无关紧要）。

您可以像这样重置该列的样式，这样您的文本将相对于 parallax div 和 min-height: 400px:

.parallax .col-xs-12 {
  position: static;
}

如果你想理想地居中，你可以添加：

.parallax .caption {
  transform: translateY(-50%);
}

CODEPEN