Выровнять изображение по вертикали внутри столбца h-100

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

Я считаю, что это то, что вы ищете -

1) При удалении h-100 из внутреннего элемента div исправление выравнивает содержимое по центру.

2) Путем изменения разметки - добавлен div с классом col-8, который будет служить синей средней секцией.

.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>

Answer 2

Вы не указали, что делает класс align-items-center, поэтому трудно сказать, что может происходить.

Простое добавление класса align-items-center в CSS с text-align: 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;
}

.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>