div中的图像对齐答案

【问题标题】：Image aligning in divsdiv中的图像对齐
【发布时间】：2012-05-04 18:52:30
【问题描述】：

我正在为 web 应用程序创建标题部分。我在按应有的方式对齐和定位事物时遇到了一些困难。

您在右侧看到的注销按钮应该向上移动到浅灰色区域。换句话说，与徽标相同。这是该部分的 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;
}

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

【问题讨论】：

请注意，您可以用一些简短的 css 规则替换注销按钮的 javascript 代码，这些规则将内容与样式分开。

标签： css image html alignment

【解决方案1】：

如果你设置了

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

到

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

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

【讨论】：

这个解决方案非常适合我的代码，而且改动很小。非常好，谢谢。

【解决方案2】：

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

希望对你有所帮助。

【讨论】：

【解决方案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>

【讨论】：

但是如果我为每个元素设置一个宽度。当然，它们都适合同一行。但是，徽标将不再位于浏览器窗口的中心，对吧？
对。你需要不同的方法。创建 div 并使用 image-background 和 image-position 将图像设置在中间，然后将另一个 div 放入其中，并向右浮动。这应该可以解决问题。