Html 在导航栏上居中显示图像

我试着用css做一个导航栏，里面有一些图标，结果如下：

我想做的是：

<>我试了很多，但是不能让图标与文本对齐，当图像在中间，文本在上面，当文本在中间时，图像在底部。

我的代码：
HTML:

    <ul class="nav">
        <li class="left"><a href="#" style="margin-right: 100px;"></a></li>
        <li class="left user_nav"><a href="#"></a></li>
        <li class="left"><a href="#">USERNAME</a></li>
        <li class="left message_nav"><a href="#"></a></li>
        <li class="left settings_nav"><a href="#"></a></li>
        <li class="left"><a href="#">CREDITS</a></li>
        <li class="center logo_nav"><a href="#"></a></li>
         <li class="right"><a href="#" style="margin-left: 100px;"></a></li>
        <li class="right fb_nav"><a href="#"></a></li>
        <li class="right tw_nav"><a href="#"></a></li>
        <li class="right"><a href="#">SEARCH</a></li>
    </ul>

css有点太多了，无法在这里发布，所以我做了一个测试，以便您可以看到完整的代码工作

---

有人能帮我把我的头发弄得有点像图片吗？

省去大量的代码编写、维护和故障排除工作。使用一个

HTML

<ul class="nav">

    <li id="left-group">
        <ul>
            <li class="user_nav"><a href="#"></a></li>
            <li><a href="#">USERNAME</a></li>
            <li class="message_nav"><a href="#"></a></li>
            <li class="settings_nav"><a href="#"></a></li>
            <li><a href="#">CREDITS</a></li>
        </ul>
    </li><!-- end #left-group -->

    <li class="logo_nav"><a href="#"></a></li>

    <li id="right-group">
        <ul>
            <li><a href="#">SEARCH</a></li>
            <li class="fb_nav"><a href="#"></a></li>
            <li class="tw_nav"><a href="#"></a></li>
        </ul>
    </li><!-- end #right-group -->

</ul><!-- end .nav -->

请注意：

• 使用flexbox，您可以用大约50%的代码实现目标
• 布局响应迅速
• 使用和属性可以轻松地将子元素水平或垂直居中

---

这是一个黑客解决方案，但您可以遍历您的元素并添加如下内容：position:relative；top:-5pxLike this：谢谢你，看到你有这么多的代码并且可以工作，看到我有这么多的代码，我看起来很傻，它一点也不傻。Flexbox相对较新。它解决了许多使用需要更多代码的问题。只要阅读MDN和CSS技巧文章，观看一些YouTube教程，您就会了解它们是如何工作的。

ul.nav {
    display: flex;
    align-items: center; /* this one line vertically centers all nav items */
    justify-content: space-between;
    width: 100%;
    height: 75px;
    padding: 0;
}

li#left-group > ul {
    display: flex;
    align-items: center;
    padding: 0;
}

li#right-group > ul {
    display: flex;
    align-items: center;
    padding: 0;
}

li#left-group { margin-left: 5%; }    
li#right-group { margin-right: 5%; }