표가없는 CSS 수직 정렬

Question

그래요; 내가 가지고이 코드로 :

<header> 
    <a href="index.html"><img id="logo" src="img/logo.png" alt="Fin Palais"/></a> 
    <a id="menu" href="#"><img id="menu" src="img/menu_mobile.png"></a></div> 
</header> 

그리고 이것은 내 CSS입니다 :

header{ 
    display: table; 
    overflow: hidden; 
    width: 100%; 
    height: 104; 
    padding-top: 10px; 
    background-image:img/header_bg.png; 
    background-image: url(img/header_bg.png); 
    background-repeat: repeat-x; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    text-align: center; 
} 
header img#logo{ 
    height: 94px; 
    position: absolute; 
    margin: auto 0; 
} 
header a#menu{ 
    border-radius: 5px; 
    background-clip: padding-box; 
    background-color: #4f0000; 
    box-shadow: inset 0 0 5px rgba(0,0,0,.75); 
    display: block; 
    float: right; 
    padding: 7px; 
} 
header a#menu:hover{ 
    background-color: #850101; 
} 
header a#menu img{ 

} 

Here it is in jsfiddle

그래서 내가 원하는 무엇을 이동으로 <header>의 내부 verticaly <a #menu>을 중심으로하는 것입니다 중심에 배치 된 <img #logo> 그래서 나는 table hack을 만들 div를 추가하거나 절대 위치를 결정합니다! 그것은 유동적이어야하며 페이지의 어떤 엘에 영향을 미치지 않아야합니다! 감사합니다. :)

Answer 1

나는이

header a#menu{ 
    border-radius: 5px; 
    background-clip: padding-box; 
    background-color: #4f0000; 
    box-shadow: inset 0 0 5px rgba(0,0,0,.75); 
    padding: 7px; 
    position:absolute 
}