Question

此页面的导航栏中的菜单图标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;
}

Answer 1

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

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

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

Answer 2

确定，代码没有错。问题是来自具有相同类名“ icon”的phpbb论坛的冲突。在我的代码中重命名.icon可以解决此问题。

菜单图标垂直对齐

2 个答案: