使用CSS来对齐两个html元素

Question

我有两个元素，<h1>和<img>。我改变了两个元素的填充，使它们在页面上对齐。这工作，除非我缩放浏览器窗口，在这种情况下两个元素的填充略有不同步。

这里的html代码：

<header> 
    <h1> Welcome to the SCEC </h1> 
    <img id="SCEC_logo" src="images/sced_logo.png" alt="scec logo"> 
</header> 

这里的CSS代码：

h1{ 
    padding: 2em 0em .2em .5em; 
    color: #FDB813; 
    font-family: Georgia; 
    font-weight: 500; 
    font-size: 2.5em; 
    font-style: italic; 
    text-align: center; 
    background-color: #004A98; 
    width: 60%; 
    margin-left: 6.5%; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    -moz-border-top-left-radius: 15px; 
    -moz-border-bottom-left-radius:15px; 
    float: left; 
    } 

#SCEC_logo{ 
    background-color: #004A98; 
    padding: .93em 2.5em .93em 0; 
    } 

http://jsfiddle.net/isherwood/BHy3u

在浏览器的默认大小，这些元素是完全一字排开，但是当我规模它，<h1>元素上的蓝色填充在底部稍长于<img>元素上的填充。

我还注意到，在IE中，<img>元素的默认屏幕尺寸略长。

如何调整填充以使其在任何浏览器中排列在任何屏幕尺寸？

Answer 1

好像你的应用样式的header会变得极其简单：

http://jsfiddle.net/isherwood/BHy3u/5

header { 
    padding: 2em .5em; 
    background-color: #004A98; 
    width: 60%; 
    margin-left: 6.5%; 
    border-radius: 15px 0 0 15px; 
    float: left; 
} 
header h1 { 
    color: #FDB813; 
    font-family: Georgia; 
    font-weight: 500; 
    font-size: 2.5em; 
    font-style: italic; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 
header img { 
    float: right; 
}