如何在菜单栏中对齐移动菜单按钮

Question

作为初学者，我使用的是Wordpress主题（悉尼），无法弄清楚如何在黑色菜单栏的中间对齐移动菜单按钮。此screenshot表明我在按钮上方比底部更具“填充”感。我希望此按钮具有相同的顶部和底部填充。

我认为问题可能在于菜单按钮（svg）不在div类“ btn-menu”内部的中间。此screenshot显示代码。这是所讨论的site。

如何将这个菜单按钮放置在黑色菜单栏的中间？非常感谢您的帮助。

Answer 1

一种方法是使用flexbox：

.menu{
    display:flex;
    align-items:center;
}

.menu{
    background: #555;
    width: 80%;
    height: 50px;
    
    display:flex;
    align-items:center;
}

.fa.fa-bars{
    color: #fff;
    font-size: 20px;
    margin-left: auto;
    padding: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="menu">
  <i class="fa fa-bars"></i>
</div>

Blockquote