如何在一條垂直線的下拉菜單中對齊「glyphicon」

在移動設備的下拉菜單中，「glyphicon-leaf」處於居中位置，但垂直方向一行中沒有對齊，如文本的情況下（畫面附着） http://www.imageup.ru/img69/2884966/123.jpg.html 如何在一條垂直線的下拉菜單中對齊「glyphicon」

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>

來源

2017-10-10 VSolodkiy

你能張貼一張圖片顯示你想要它的樣子嗎？我不清楚從閱讀描述和看圖像。 –

你想要列表項目在無序列表中居中，但仍然排在樹葉之上嗎？ – wpalmes

如果將div標記中的內容封裝在wrap類中，並給它一個固定的寬度，則可以將多個元素相互垂直對齊。我希望這是你想達到的目標。下面的CSS類被改變了。

CSS：

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

下面是同一個工作的例子！讓我知道這是否解決了您的問題！

Codepen Demo

來源

2017-10-10 17:24:40

是的，這是需要的。非常感謝您的幫助！ – VSolodkiy

@Vololkiy不客氣！ –

@Vololkiy可以關閉此問題嗎？ –

如何在一條垂直線的下拉菜單中對齊「glyphicon」

回答

相關問題