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

Question

Я пытаюсь центрировать выровненные по вертикали пункты меню (Img и текст) в li.

Вот скриншот, как он выглядит. Пункты меню должны быть в центре. https://i.gyazo.com/aaabc2d1f1ee8f75e12e044e8b0560a5.png

Сначала выровняли изображение и захват по вертикали, которые я использовал

display:table-cell;
vertical-align: middle;

Я тоже пробовал:

display: flex;
align-items: center;
justify-content: center; 

Оба выравнивают его по вертикали, но содержимое не центрировано. Есть идеи, как это отцентрировать?

.mx-navigationtree {
    background-color: $navigation-bg;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-inner>ul >li >a {
    color: black; //$navigation-color;
    background-color: white; //$navigation-bg;
    font-weight: bold; //$font-weight-normal;
    display:table-cell;
    vertical-align: middle;
}   

.navbar-inner>ul >li >a img {
    display:table-cell;
    vertical-align: middle;
}

<div class="mx-navigationtree">
  <div class="navbar-inner">
    <ul>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-0 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-0"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> List</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-1 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-1"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Card</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-2 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-2"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Chart</a></li>
    </ul>
  </div>
</div>

Answer 1

Не всегда необходимо использовать дисплей: ячейку таблицы и вертикальное выравнивание по центру.

Посмотрите на альтернативное решение.

.mx-navigationtree {
    background-color: $navigation-bg;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}

.navbar-inner>ul >li{
  clear:both;
  text-align:center;
  list-style:none;
  border-bottom:1px solid #efefef;
}
.navbar-inner>ul >li >a {
    color: black; //$navigation-color;
    background-color: white; //$navigation-bg;
    font-weight: bold; //$font-weight-normal;
    text-decoration:none;
    line-height:50px;
    display:inline-block;
    width:100%;
}   

.navbar-inner>ul >li >a img {
    float:left;
    width:50px;
    height:50px;
}

<div class="mx-navigationtree">
  <div class="navbar-inner">
    <ul>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-0 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-0"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> List</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-1 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-1"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Card</a></li>
      <li><a href="#" class="mx-name-2f63aabf-9ade-4aac-96d7-768044c6b569-2 dropdown" data-item-id="2f63aabf-9ade-4aac-96d7-768044c6b569-2"><img src="http://localhost:8080/img/img$briefcase_small_blue.png?636779626789785643"> Chart</a></li>
    </ul>
  </div>
</div>