Comment aligner "glyphicon" dans le menu déroulant dans une ligne verticale

Question

Dans le menu déroulant pour les appareils mobiles, "glyphicon-leaf" est centré, mais verticalement il n'y a pas d'alignement dans une ligne, comme dans le cas de texte (un écran est attaché) 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

Si vous intégrez le contenu d'une balise div à la classe wrap et que vous lui attribuez une largeur fixe, vous pouvez aligner verticalement plusieurs éléments les uns par rapport aux autres. J'espère que c'est ce que vous voulez accomplir. Les classes CSS ci-dessous sont modifiées.

CSS:

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

est Ci-dessous un exemple de travail pour le même! Faites-moi savoir si cela résout votre problème!

Codepen Demo