菜单图标垂直对齐答案

【问题标题】：Menu icon vertical align菜单图标垂直对齐
【发布时间】：2018-12-03 17:38:59
【问题描述】：

本页导航栏中的菜单图标，class="fa fa-bar"： https://www.theairlinepilots.com/tapforum/forum-header.php 在手机 chrome 浏览器上看到时不是垂直对齐的，但在桌面 chrome 浏览器上看到时是垂直对齐的。尝试了许多将其包含在 div 中并使用 -ve 边距值来补偿浮动效果的组合，但没有成功。如何为所有浏览器正确垂直对齐它。谢谢。 HTML

<div class="tap-navbar" id="my-tap-navbar">
  <a href="https://www.theairlinepilots.com/index.php" class="active">About</a>
  <a href="https://www.theairlinepilots.com/index.php">Forums</a>
  <a href="https://www.theairlinepilots.com/index.php">Flight Planning</a>
  <a href="https://www.theairlinepilots.com/index.php">Apps</a>
  <a href="https://www.theairlinepilots.com/membership-subscription.php">Membership</a>
  <a href="https://www.theairlinepilots.com/admincontact.php">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars" style="color:#ffffff;vertical-align:middle;">
</a></i>
</div>

CSS

.tap-navbar {
font-family: Courier, Verdana, sans-serif, arial;
overflow: hidden;
background-color: #006699;
border-radius:0px 0px 5px 5px;
margin-bottom:5px;
    background: #005580;
    background: linear-gradient(#005580,#0077b3);
    background: -moz-linear-gradient(#005580, #0077b3); 
    background: -webkit-linear-gradient(#005580, #0077b3);  
    background: -o-linear-gradient(#005580, #0077b3);
    background: -ms-linear-gradient(#005580, #0077b3);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #005580),color-stop(0, #0077b3));    
vertical-align:middle;
}

【问题讨论】：

标签： css icons alignment

【解决方案1】：

我不是 css 专家，但您可以应用以下解决方案：

<i class="fa fa-bars" style="color:#ffffff; vertical-align:middle; height: 16px;">

这意味着添加高度属性。另外一个建议，请使用<em> 而不是<i> 标签。阅读更多https://www.w3.org/International/questions/qa-b-and-i-tags

【讨论】：

【解决方案2】：

好的，发现代码没有问题。问题是来自具有相同类名“图标”的 phpbb 论坛的冲突。在我的代码中重命名 .icon 解决了这个问题。

【讨论】：