센터 링크는 <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

귀하의 링크를 때문에의 수평 중심으로하지 않습니다에서 조정 margin-top를 사용할 수 있습니다

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 { vertical-align : middle; } 나는 그것이 어땠는지에 대해 좋아한다. http://i.imgur.com/2H51Diw.png 나는 -1이 아니었다. –

그것은 당신의 이미지없이 이야기하지만, a에 vertical-align:top를 사용하는 하드 그리고 당신이

출처

2014-01-09 01:50:05 jmore009

margin-top을 사용하지 않아도됩니다 ... vertical-align : 중간 이미지가 이미지에 대신 사용되어야합니다. –

센터 링크는 <header>

답변

관련 문제