圖像在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中對齊

回答

相關問題