Css divs中的图像对齐

我正在为一个webapp创建一个标题部分。我在调整和定位事物时遇到了一些困难

您在右侧看到的注销按钮应该向上移动到浅灰色区域。换言之，与徽标的对齐方式相同。这是该部分的html：

<div>

    <img src="Images/logo.png" id="imgLogo" alt="" />
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />

</div>

我做错了什么？我该怎么做才能让那个该死的注销按钮更上一层楼？

---

提前谢谢

您应该为每个元素设置宽度。第二个img应该有

display: block

还有

或者你可以用这样的东西

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}


#imgbg {

    background-image: url(Images/logo.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}




<div id="imgbg">
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />
</div>

---

对于img徽标，我将制作一个div元素，并将其作为背景，如下所示：

#imglogo{
    background: url('Images/logo.png') no-repeat;
}

然后，对于“注销”按钮，我会将其放入div中，如下所示：

<div id="imglogo">
<img src="Images/logout-idle.png"
     alt=""
     id="imgLogout"
     onmouseover="this.src='Images/logout-hover.png'"
     onmouseout="this.src='Images/logout-idle.png'"
     onmousedown="this.src='Images/logout-down.png'"
     />
</div>

我希望这会有帮助。

如果您设置

 #imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    } 

到

---

这将把它放在你想要的地方。

但是如果我为每个元素设置一个宽度。当然他们两个都适合同一条线。但这样徽标就不会在浏览器窗口中居中了，对吗？对。你需要不同的方法。创建DIV并使用图像背景和图像位置在中间设置图像，并将另一DIV放入浮标中。这应该可以解决问题。请注意，您可以使用一些简短的css规则来替换注销按钮的javascript代码，这些规则可以将内容与样式分离。此解决方案非常适合我的代码，只需进行最小的更改。非常好，谢谢。

 #imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    } 

 #imgLogout{
     position: absolute;
     top: 4px;
     right: 10px
     }