中心环节<header>

对不起，不知道多少英语，用翻译

您好，我有一个内和导航我必须按顺序如下内：中心环节<header>

第一链接 - 第二链接 - 徽标 - 链接第三 - 第四链接

徽标居中，但链接不像徽标一样排列，我该如何解决？

使用铬
看起来像这样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; 
}

来源

2014-01-09 Luis Romero

我不确定你的意思;他们排队在这里很好：http://jsfiddle.net/n4Px4/ –

你使用什么浏览器？ –

你的意思是垂直吗？ – Goose

-1

您的链接不是水平居中，因为调整：

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/

如果这个回答你的问题，请赞成票，并标记为答案。

来源

2014-01-09 01:50:43

为什么这是低调的？这是正确的方法！ –

伙计，非常感谢你，在你的帮助下，我发现解决方案并不是以链接为中心，而是以图像为中心 img垂直对齐：中间; } 我喜欢它是如何变成http://i.imgur.com/2H51Diw.png我不是-1 –

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

来源

2014-01-09 01:50:05 jmore009

使用margin-top是不必要的... vertical-align：middle应该用在图像上。 –

中心环节<header>

回答

相关问题