Как выровнять элементы на Flexbox?

Question

[Raz-Dva]

Элементы стоят в одну строку. Нужно выровнять меню так, что бы оно всегда оставалось ровно по-середине страницы.

<div class="box_navbar_collapse">
    <a class="navbar-brand" href="#">
        <img src="img/index/logo.png" alt="">
    </a>
    <ul class="nav navbar-nav">
        <li>
            <a href="#">text</a>
         </li>
          <li>
            <a href="#">text</a>
         </li>
          <li>
             <a href="#">text</a>
         </li>
      </ul>
      <button class="btn">кнопка</button>
      <div class="box_tell">
         <p>[phone]</p>
         <p>[phone]</p>
      </div>
</div>
<div class="text-center">
  <span>|</span>
</div>
<div class="text-center">
  <span>center</span>
</div>

.box_navbar_collapse{
  display: flex;
  align-items: center;
  justify-content:space-between;
}
.navbar-nav{
   display: flex;
  align-items: center;
  list-style: none;
   flex:1;
}
.navbar-nav >li{
  margin:0 10px;
}
.box_tell>p{
  margin:5px 0;
}
.text-center{
  text-align:center;
}
.box_tell{
 margin-left:20px;
}

вот пример https://jsfiddle.net/157dr96p/1/

Answer 1

[fetis26]

justify-content: center;
но у вас справа еще телефоны, поэтому для .navbar-nav сделайе паддинг слева равный ширине этих телефонов.