在设置为覆盖的背景图像中垂直对齐两个 div

Question

我有一个 div，它使用 background-image 属性并将 background-size 设置为 cover。在包含背景图像的 <div> 中，我有一个包含文本块的 <div> 和一个包含图像的 <div>。

我试图在背景图像中垂直对齐两个 <div>。

我有代码（如下）垂直对齐 <div> 相对于彼此但不在背景图像内。我知道我的代码不起作用，因为垂直对齐需要在 bg class 级别发生，但我不知道如何让它起作用。

我有以下HTML

<div class="bg">
  <div class="container">
    <div class="row vertical-align">
      <div class="col-xs-6">
        <h4 class="text-center">Zack Gallinger has an MBA from Rotman School of Management. He also runs The 10 and 3, a Canadian data journalism site.</h4>
      </div>
      <div class="col-xs-6">
      <img src="http://www.lucidwebgrouptest3.com/Images/Zack.jpg" class="img-circle">
      </div>
    </div>
  </div>
</div>

和CSS

body,
html {
  height: 100%;
}

.bg {
  background-image: 
url("http://www.lucidwebgrouptest3.com/Images/Background.jpg");
  height: 60%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center; /* Optional, to align inner items 
                          horizontally inside the column */
}

h4 {
  color: white;
}

密码也在CodePen。

Answer 1

您需要为 container 和 row 添加高度，以便它们匹配 bg

.container {
  height: 100%;
}

.vertical-align {
  height: 100%;
  display: flex;
  flex-direction: row;
}

Updated codepen

在设置为覆盖的背景图像中垂直对齐两个 div

Vertically align two divs within a background image set to cover

css

background-image

vertical-alignment

flexbox