图像在div中对齐

我正在为webapp创建标题部分。我按照它应该的方式对齐和定位事物有困难。 enter image description here 图像在div中对齐

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

我在做什么错？我能做些什么来获得该注销注销按钮更多地移动到顶部？在此先感谢！

来源

2012-05-04 Tiwaz89

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

如果设置了

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

到

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

这将会把它放在你想要它。

来源

2012-05-04 10:44:53 frontendzzzguy

这是另一种方法。 – debianek

该解决方案适合在我的代码中进行很少的更改。非常好，谢谢。 – Tiwaz89

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

来源

2012-05-04 10:39:00 debianek

但是，如果我为每个元素设置一个宽度。当然，他们都适合同一条线。但是，那么徽标将不再在浏览器窗口中居中呢？ – Tiwaz89

对。你需要不同的方法。创建div并使用图像背景和图像位置在中间设置图像，并将其中的另一个div与float右移。这应该够了吧。 – debianek

为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>

我希望有所帮助。

来源

2012-05-04 10:43:13

当然也有#imgLogout相同的样式。 –

图像在div中对齐

回答

相关问题