在导航栏上居中图像

Question

我试图在css中使用一些图标来执行导航栏，这就是结果：

我试图做的是：

我尝试了很多但是coudn没有让图标与文本对齐，当图像位于文本中间的中间时，文本位于中间，图像位于底部。< / p>

我的代码：
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有点太多了，所以我发了JSFiddle所以你可以看到完整的代码工作。

有人能帮助我让我看起来有点像形象吗？

Answer 1

节省大量代码编写，维护和故障排除。使用CSS Flexbox。

<强> 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 -->

CSS （flex部分）

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%; }

https://jsfiddle.net/j0roeoeb/6/

一些注释：

• 使用flexbox，您可以减少约50％的代码来实现目标。
• 布局响应。
• 使用justify-content和align-items属性可以轻松地将子元素水平或垂直居中。
• All major browsers support flexbox, except IE 8 & 9.