divs에서 이미지 정렬

Question

webapp의 헤더 섹션을 만드는 중입니다. 내가해야 할 방식대로 물건을 정렬하고 배치하는데 약간의 어려움이 있습니다.

오른쪽에 보이는 로그 아웃 버튼은 밝은 회색 영역으로 이동해야합니다. 즉, 로고와 같은 줄에 있습니다.

<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; 
} 

내가 뭘 잘못이 섹션의 HTML입니까? 저기 그 로그 아웃 버튼을 더 위로 이동하려면 어떻게해야합니까? 미리 감사드립니다.

Answer 1

를 설정하면 원하는 위치이 그것을 넣어 것입니다

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

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

에.

Answer 2

각 요소의 너비를 설정해야합니다. 두 번째 img는

display: block 

이어야합니다.

하거나 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 요소를 만들 것 그 배경으로 그래서 같은 : 밖으로 로그에 대한 다음

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

도움이 되었기를 바랍니다.