Question

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

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

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

使用chrome
看起来像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/

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

如何在<header>？</header>中居中链接

2 个答案: