css浮动和对齐方式不起作用

Question

我目前的工作如下所示。我想实现的是文本Membership Registration对齐中心，而超链接English和中 文是浮动的，但接近边框底部 - 现在它们浮动到顶部。

HTML：

<div id="Header"> 
    <a id="logo" href="http://localhost"><img alt="logo" src="images/logo.jpg"/></a> 
    <div id="HeaderText"><h1>Membership Registration</h1></div> 
    <div id="header_right"> 
     <a href="index.php?lang=en">English</a> | 
     <a href="index.php?lang=zh">中文</a> 
    </div> 
</div> 

CSS：

#Header { 
    height:70px; 
    margin-bottom:11px; 
    border-bottom: #dbe0e3 1px solid; 
} 

#header_right { 
    float: right; 
    padding-right: 50px; 
} 

#logo { 
    float: left; 
    height:65px; 
    left:20px; 
    top:17px; 
} 

img { 
    display: inline-block; 
    vertical-align: middle; 
    max-height: 100%; 
    max-width: 100%; 
} 

#HeaderText { 
    float: left; 
    text-height: 65px; 
    text-align: center; 
    left: 50%; 
} 

Answer 1

添加填充顶到#header-right。

#header_right {padding-top: 30px;} 

http://jsfiddle.net/e67wd21v/1/

注意你的代码：
left和top一筹莫展的时候，元素没有position财产（#logo）
text-height属性不存在（在#headerText使用） - 你可能意思是height或line-height。对于header_right

Answer 2

更新CSS

#header_right { 
float: right; 
padding:30px 50px 0 0; 
box-sizing:border-box; 
} 

检查小提琴

http://jsfiddle.net/swapnilmotewar/sh72pgmx/1/