在导航栏上居中图像

Question

我试图在 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 比 post 有点多所以我做了一个 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（弹性部分）

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 and align-items 属性可以很容易地使子元素水平或垂直居中。
All major browsers support flexbox, except IE 8 & 9.

在导航栏上居中图像

Centering images on navbar

html

css

nav