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

あなたは

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

へ

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

を設定した場合、あなたがそれをしたい場所、これはそれを置くだろう。

Answer 2

各要素の幅を設定する必要があります。 2番目のimgは、

display: block 

などである必要があります。アウトログのその後

#imglogo{ 
    background: url('Images/logo.png') no-repeat; 
} 

：よう

それとも、IMGのロゴについては、この

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

Answer 3

のようなものを使用することができ、私はdiv要素になるだろうと持っている背景としてので、ボタンのように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> 

私は助けて欲しいです。