Выравнивание загрузчиков по центру элементов неупорядоченного списка

Question

У меня есть навигационная панель с начальной загрузкой 3 и Angular JS.На этой навигационной панели у меня есть неупорядоченный список с элементами li.Ниже я показываю часть моего navbar:

Код моего navbar:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
            aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a ng-click="reloadPage()" class="navbar-brand" href="/"><img style="margin-top: -15px;" width="192"
                                                                  height="49" src="packages/img/logo-trans.jpg"</a>
    <ul class="nav navbar-nav">
        <li class=""><a target="_self" ng-click="openTabs()" style="cursor: pointer;">DRAFT: Opened <span
                class="badge"><% tabService.tabs.length %></span></a></li>
        <li class=""><a target="_self" ng-click="test()" style="cursor: pointer;">LEADS: New <span
                class="badge">0</span></a></li>
        <li class="" ng-show="!htLoading"><a target="_self">AHT: <% htValues.aht | secondsToDateTime %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">EHT: <% htValues.eht | secondsToDateTime %> </a>
        </li>
        <li ng-show="htLoading" >
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
        <li class="" ng-show="!htLoading"><a target="_self">ABuffer: <% htValues.buffer | secondsToDateTime
            %></a></li>
        <li ng-show="htLoading">
            <img width="25" height="25" src="/packages/img/loader_white.svg" style="margin-top: 13px;"/>
        </li>
    </ul>
</div>

Когда данные с AHT,EHT и ABuffer еще не загружены, тогда я показываю глифы с директивой angularJS ng-show = "htLoading".Но они выглядят тогда:

На мой взгляд, это не выглядит хорошо.Поэтому я бы хотел переместить эти загрузчики в центр каждого элемента списка.Как я мог это сделать?Возможно ли это?

Answer 1

Вы можете сделать это с помощью flex

ul.nav{
  display: flex;
  justify-content: space-between; /* gives equal space between all li items*/
}

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