Вертикальное центрирование не выполняется при удалении Flexbox

Question

Я не уверен, почему это происходит. Когда я удаляю:

.nav-username {
    display: flex;
    align-items: center;
}

элементы выравниваются по горизонтали, однако изображение и текст перестают выравниваться по вертикали, потому что я удалил display: flex и align-items: center.

$('.dropdown').on('click', function() {
  $('.navigation-ul li:not(:first-child)').toggleClass('active');
});

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
}

a {
  color: #f1f1f1;
}

html {
  font-size: 16px;
}

body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

.navigation {
  background-color: #171717;
}

.navigation-ul {
  display: flex;
  align-items: center;
}

.navigation-ul>li:not(.dropdown) {
  padding: 10px 15px 10px 15px;
  font-weight: 500;
  text-align: center;
  font-size: 1em;
  color: white;
  background-color: #151719;
  list-style-type: none;
}

.navigation-ul li:nth-last-child(2) {
  margin-left: auto;
}

.nav-username {
  display: flex;
  align-items: center;
}

.profile-picture {
  display: inline-block;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin-right: 10px;
}

@media all and (min-width: 0px) and (max-width: 1200px) {
  .navigation-ul {
    flex-wrap: wrap;
  }
  .navigation-ul>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1200px) {
  .navigation-ul li:first-child {
    display: block;
  }
  .navigation-ul li {
    display: none;
  }
  .navigation-ul li.active {
    display: block;
  }
  .navigation-ul .dropdown {
    display: block;
    cursor: pointer;
  }
  .home-container {
    columns: 2;
  }
  .dropdown {
    padding: 7px 0 7px 0;
    text-align: center;
  }
  .specific-image-flexbox {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .home-container {
    columns: 1;
  }
  .category-container-element {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="navigation-ul">
      <li class='dropdown'>Dropdown</li>
      <li><a href="">Images</a></li>
      <li><a href="">Categories</a></li>
      <li><a href="">Upload</a></li>
      <li>
        <a class='nav-username' href=''>
          <img class='profile-picture' src=''> Username
        </a>
      </li>
      <li><a href="">Logout</a></li>
    </ul>
  </div>
</nav>

Answer 1

Вам также необходимо добавить свойство justify-content:center;. Таким образом, он будет выровнен по центру по вертикали и горизонтали.

Итак, вам нужно обновить

.nav-username {
    display: flex;
    align-items: center;
}

до

.nav-username {
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 2

Ваш код CSS:

.nav-username {
    display: flex;
    align-items: center;
}

... применяется к элементу привязки:

<a class='nav-username' href=''>
    <img class='profile-picture' src=''>
    Username
</a>

Давайте начнем с того, что происходит, когда flex удален .

• Элемент привязки по умолчанию является элементом встроенного уровня. Это означает, что он занимает только пространство своего контента. Для встроенных элементов свойство width и свойство height не применяются.

• Затем учтите, что свойство vertical-align применяется к элементам встроенного уровня (и элементам ячейки таблицы). Его значение по умолчанию baseline, что означает, что элементы уровня строки начинаются с выравнивания базовой линии .

• Таким образом, без flex layout якорный элемент возвращается к block layout , и вышеуказанные настройки действуют. Для вертикального центрирования текста в этом случае попробуйте vertical-align: middle.

  /* .nav-username {
        display: flex;
        align-items: center;
     } */
  
  .nav-username > * {
      vertical-align: middle;
  }
  

jsFiddle demo

Когда flex активен , вот как он проигрывается:

• Flex-контейнер преобразует свои дочерние элементы в flex-элементы, которые являются элементами уровня блока, по определению . Это преобразование игнорирует тип элемента. Таким образом, элементы, находящиеся на уровне строки или на уровне блока в блочной компоновке , имеют уровень блока в гибкой компоновке.

• Это означает, что свойство vertical-align игнорируется элементами flex и вместе с объяснением, приведенным выше, объясняет, почему вертикальное центрирование работает при наличии flex, но не при удалении flex.

Answer 3

Я думаю, что есть проблема с размещением типа отображения flex на теге привязки. Я поместил класс flex в элемент списка, и он, кажется, работает нормально:

$('.dropdown').on('click', function() {
  $('.navigation-ul li:not(:first-child)').toggleClass('active');
});

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
}

a {
  color: #f1f1f1;
}

html {
  font-size: 16px;
}

body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}

.navigation {
  background-color: #171717;
}

.navigation-ul {
  display: flex;
  align-items: center;
}

.navigation-ul>li:not(.dropdown) {
  padding: 10px 15px 10px 15px;
  font-weight: 500;
  text-align: center;
  font-size: 1em;
  color: white;
  background-color: #151719;
  list-style-type: none;
}

.navigation-ul li:nth-last-child(2) {
  margin-left: auto;
}

.nav-username {
  display: flex;
  align-items: center;
}

.profile-picture {
  display: inline-block;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin-right: 10px;
  vertical-align: middle;
}

@media all and (min-width: 0px) and (max-width: 1200px) {
  .navigation-ul {
    flex-wrap: wrap;
  }
  .navigation-ul>li {
    flex: 1 1 100%;
  }
}

@media screen and (max-width: 1200px) {
  .navigation-ul li:first-child {
    display: block;
  }
  .navigation-ul li {
    display: none;
  }
  .navigation-ul li.active {
    display: block;
  }
  .navigation-ul .dropdown {
    display: block;
    cursor: pointer;
  }
  .home-container {
    columns: 2;
  }
  .dropdown {
    padding: 7px 0 7px 0;
    text-align: center;
  }
  .specific-image-flexbox {
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .home-container {
    columns: 1;
  }
  .category-container-element {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class='navigation'>
  <div class="wrapper">
    <ul class="navigation-ul">
      <li class='dropdown'>Dropdown</li>
      <li><a href="">Images</a></li>
      <li><a href="">Categories</a></li>
      <li><a href="">Upload</a></li>
      <li class='nav-username'>
        <a href=''><img class='profile-picture' src=''> Username</a>
      </li>
      <li><a href="">Logout</a></li>
    </ul>
  </div>
</nav>