css - div中的图像对齐

Question

我正在为 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>

这些元素的 CSS：

#imgLogo{
    margin: 0 auto;
    display: block;
}

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

我究竟做错了什么？我该怎么做才能让那个该死的注销按钮移到顶部？提前致谢！

Answer 1

对于 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>

我希望这有帮助。

Answer 2

如果你设置

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

到

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

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

Answer 3

您应该为每个元素设置宽度。第二个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>