图像在div中对齐

时间:2012-05-04 10:35:20

标签: css image html alignment

我正在为webapp创建标题部分。我难以按照应有的方式对齐和定位事物。enter image description here

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

我做错了什么?我该怎么做才能让该登记按钮更多地移动到顶部? 提前谢谢!

3 个答案:

答案 0 :(得分:4)

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

我希望有所帮助。

答案 1 :(得分:4)

如果设置

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

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

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

答案 2 :(得分:1)

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