Question

我正在尝试在引导程序4中垂直居中放置图像。导航栏应为固定高度（100像素），并且列也应具有100像素的高度，因为它们具有背景。

我正在使用align-items-center类，但它似乎没有用，图像停留在顶部。

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-color: #3366cc;
  height: 100px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center h-100" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background:white;">
        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

Answer 1

您未包括align-items-center类的内容，因此很难判断可能会发生什么。

只需使用align-items-center将text-align: center;类添加到CSS即可使图像居中。

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  background-color: #3366cc;
  height: 100px;
}

.align-items-center {
  text-align: center; 
}

<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center h-100" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background:white;">
        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

Answer 2

我相信这就是您要寻找的-

1）从内部div中删除h-100会完成修复，使内容在中间对齐。

2）通过更改标记-添加了一个类别为col-8的div，它将用作蓝色的中间部分。

.navbar-brand {
  height: 100px;
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  height: 100px;
}

.middle-nav {
  background-color: #3366cc;
  width: 100%;
  height: 100px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar sticky-top p-0">
  <div class="container-fluid h-100" style="border-bottom: 1px solid rgb(192, 192, 192); height:100px;">
    <div class="row justify-content-between align-items-center" style="width:100vw;">
      <div class="col-2 col-xxxl-1 h-100" style="background: white;">

        <img class="img-fluid" style="max-height: 100px" src="https://via.placeholder.com/350x150" alt="" />
      </div>
      <div class="col-8 middle-nav"></div>
      <div class="col-2 col-xxxl-1 text-center" style="background: white;height: 100%;">
        <p class="no-wrap"><a href=""> Sign out</a></p>
      </div>
    </div>
  </div>
</nav>

h-100列内的垂直对齐图像

2 个答案: