центрирование навигатора при изменении размера экрана

Question

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

display: 
inline-block; 
margin: 0px auto; 

Это еще не центр ...

Однако мой логотип, содержащийся в приведенном выше DIV, обладает теми же свойствами и он может центрировать, когда экран изменяет размер.

Мое меню HTML

<nav class="navbar"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav"> 
     <span class="fa fa-bars"> </span> 
    </button> 
    <a href="javascript:void(0)" class="navbar-brand logo-top"> </a> 
</div> 
<div class="sidebar-offcanvas sidebar-nav" role="navigation"> 
    <ul class="menu"> 
     <li class="active"><a href=“#A" data-section=“A”>A</a></li> 
     <li><a href=“#B" data-section=“B”>B</a></li> 
     <li><a href=“#C" data-section=“C”>C</a></li> 
     <li><a href=“#D" data-section=“D”>D</a></li> 
     <li><a href=“#E" data-section=“E”>E</a></li> 
    </ul> 
</div> 
</nav> 

Кто-нибудь может дать мне некоторое представление?

Answer 1

display: inline-block; нуждается в text-align: center; на родительском элементе, чтобы он центрировался, как вы думаете, потому что это встроенный элемент.

Вместо этого используйте display: block; margin: 0px auto;. Вам также нужно будет установить ширину, если она не совсем так.

Examples