没有表格的 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

所以我想要的是将 <a #menu> 居中<header> 内部的垂直度不移动居中的<img #logo>所以我不能添加一个 div 来制作 table hack或者make是绝对定位!它必须正确 float 并且不影响页面中的任何其他内容!多谢! :)

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
}