如何将链接集中在内 ？

Question

我按以下顺序有4个链接和1个img：

第一个链接 - 第二个链接 - img - 链接第三个 - 第四个链接

img是居中的，但链接不像img那样排列。

• 使用铬
• 看起来像这个http://i.imgur.com/ge9V2Rj.png

HTML

<header>
    <nav>
        <a href="#inicio">INICIO</a>
        <a href="#nosotros">NOSOTROS</a>
        <a href="#inicio"><img url ("http://i.imgur.com/5708znM.png") alt="Sookies"></a>
        <a href="#productos">PRODUCTOS</a>
        <a href="#contacto">CONTACTO</a>
    </nav>
</header>

CSS

* { 
    padding: 0;
    margin: 0;
}

header {
    text-align: center;
    letter-spacing: 1px;
    background: #2c3e50;
    color: #fff;
}

header nav {
    display: inline-block;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 50px;
    padding-left: 50px;
}

a {
    text-decoration: none;
    color: #fff;
}

Answer 1

没有你的形象很难说，但在vertical-align:top上使用a你可以使用margin-top从那里调整

Answer 2

由于以下原因，您的链接不会水平居中：

header nav {
    display: inline-block;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 50px; <-- This
    padding-left: 50px; <-- This
}

它将首先将填充应用到右侧，因为它在填充左侧之前呈现，因此这就是它向右移动一点的原因。去掉它！

要使徽标垂直居中，请将其添加到图片中：

img {
     vertical-align: middle;
}

小提琴：http://jsfiddle.net/ufPNY/

如果这回答了您的问题，请将其投票并将其标记为答案。