Question

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

我正在尝试垂直对齐背景图片中的两个<div>。

我的代码（下方）将<div>相对于彼此垂直对齐，但不在背景图像中。我理解我的代码不起作用，因为垂直对齐需要在bg类级别进行，但我无法弄清楚如何使其工作。

我有以下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以覆盖

1 个答案: