一行中的两个 jumbotron，文本居中对齐

Question

我在玩 boostrap 4 css 时遇到了麻烦。

我希望连续两个具有相同高度的巨型显示器，无论里面是什么，并且 div 的内部垂直对齐中心。

我的代码如下：

<div class="container">
     <div class="row">
          <div class="col-8">
              <div class="jumbotron greenback">
                   <h7>Welcome to the Project test Detail page</h7>
              </div>
          </div>
          <div class="col-4">
              <div class="jumbotron greenback">
                  <div class="inner-score">
                      <div class="score-title">
                          <h6>Team Score</h6>
                      </div>
                      <div class="score-value">
                           <h4>85</h4>
                      </div>    
                  </div>

              </div>

          </div>
      </div>      
</div>

我创建了一个 jsfidlle 给你看https://jsfiddle.net/kscv67kt/2/ 如您所见，这两个 jumbotron 具有垂直文本对齐中心但不是全行高..

Answer 1

您是否尝试将 height: 100% 添加到 jumbotron 元素？

.jumbotron.greenback {
  height: 100%;
}

这将导致两个元素都填充容器的高度（在这种情况下为.row）。

值得注意的是，设置height: 100% 会导致元素的下边距溢出其容器，因此为了整洁，您可以相应地调整 jumbotron 及其容器的 margin-bottom 属性...

.container {
  margin-bottom: 32px /* Moving the margin-bottom value of the 
  .jumbotron to it's outer container.  */
}

.jumbotron.greenback {
  height: 100%;
  margin-bottom: 0;
}

或者使用 jQuery...

$(document).ready(function() {

  var jumboMaxHeight = 0

  $(".jumbotron").each(function(){
    if ($(this).height() > jumboMaxHeight) { 
      jumboMaxHeight = $(this).height() }
    })

  $(".jumbotron").height(jumboMaxHeight)

})

编辑：要使.jumbotron 中的文本元素居中，您可以使用多种方法，一种是在父元素上使用flexbox 属性（结合jQuery 解决方案）...

.jumbotron.greenback {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}