html - 使用 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;
}