ドロップダウンメニューの "glyphicon"を1本の垂直線で整列する方法

Question

モバイルデバイスのドロップダウンメニューでは、 "glyphicon-leaf"が中央に配置されますが、垂直方向には整列がありません。テキストの場合（画面が取り付けられている） http://www.imageup.ru/img69/2884966/123.jpg.html

https://codepen.io/vosolodkiy/pen/XeqaOR HTML

 <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1> 
      </a> 
     </div> 

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu_collapse" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
        </div> 

    <div id="menu_collapse" class="collapse navbar-collapse"> 
     <ul id="menu-list" class="nav navbar-nav"> 
      <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg"> 
      <span class="glyphicon glyphicon-leaf"></span>Chicken</a> 
      </li> 
      <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg "> 
      <span class="glyphicon glyphicon-leaf"></span>Beef</a> 
      </li> 
      <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg"> 
      <span class="glyphicon glyphicon-leaf"></span>Sushi</a> 
      </li> 
      </ul> 
    </div><!--menu-list--> 
    </div><!--container--> 
    </nav><!--navigation menu--> 
     </header> 
     <!-- jQuery (Bootstrap JS plugins depend on it) --> 
     <script src="js/jquery-3.2.1.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/script.js"></script> 
    </body> 

Answer 1

divタグのコンテンツをクラスwrapでラップし、固定幅を指定すると、複数の要素を互いに垂直に整列させることができます。私はこれがあなたが達成したいと思っていることを望みます。以下のCSSクラスが変更されました。

CSS：以下

.wrap{ 
    width:120px; 
    text-align:left; 
    display: inline-block; 
} 

同じのための実施例であります！これで問題が解決した場合はお知らせください。

Codepen Demo