中心環節<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>

回答

相關問題