두 이미지를 공백으로 나란히 표시 (CSS)

Question

내 웹 페이지에 2 개의 이미지가 나란히 표시됩니다. 나는 2 개의 이미지 사이에 공간을 유지하려고 노력하고 있지만 그것을 할 수 없다. 이미지를 나란히 표시하기 위해 CSS를 사용했습니다.

당신이 볼 수있는 질문

여기

#divCenter { 
    text-align: center; 
} 

#divIDOne { 
    margin-right: 200px; 
    } 

#divIDTwo { 
    margin-left: 300px; 
} 

그것을 표시 것입니다 : 여기

<div id="divCenter"> 

     <img src="Company Logo.jpg" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/> 

      <%-- Code for the motion image --%> 



     <object type="application/x-shockwave-flash" data="animation.swf" width="719" height="174" id="divIDTwo"> 
     <param name="movie" value="animation.swf" /> 
     </object> 

     </div> 

내 CSS 코드 : 여기

내 HTML 코드입니다 2 개의 이미지 사이에 공백이 없습니다. 이 문제를 어떻게 해결할 수 있습니까?

당신은 두 이미지 사이의 공간을 얻을 수 padding 또는 margin를 사용할 수있는 시간

Answer 1

text-align:center; 대신 margin:0px auto;을 사용하고 width 및 height 속성을 지정하십시오. 시도해보십시오. HTML

<div id="divCenter"> 
     <img src="#" alt="Company Logo" style="width:150px;height:150px" id="divIDOne"/> 
<!-- <%-- Code for the motion image --%> --> 
     <object type="application/x-shockwave-flash" data="animation.swf" width="780" height="174" id="divIDTwo"> 
     <param name="movie" value="animation.swf" /> 
     </object> 
</div> 

CSS

#divCenter { 
    margin:0px auto; 
    width:960px; 
    height:auto; 
    padding:10px; 
} 

#divIDOne { 
    margin-right: 0px; 
} 

#divIDTwo { 
    margin-left: 20px; 
} 

이미지

Fiddle

Answer 2

주셔서 감사합니다.

#divCenter { 
    text-align: center; 
} 
#divCenter image { 
    padding:2px; 
    margin:2px; 
} 

그러나 더 좋은 방법은 li 또는 div 또는 td 같은 용기에 이미지를 유지하는 것입니다.

Answer 3

당신은 인라인 값 즉 display=inline에 디스플레이 속성을 설정할 수 있습니다 필요한 경우이 그들 사이에 공간을 추가 할 이미지에 약간의 여유를 줄 수 있습니다. 보다 정확하게하려면 오른쪽 이미지의 margin-left 속성을 원하는 값으로 설정하거나 왼쪽 이미지의 margin-right 속성을 원하는 값으로 설정하여 그 사이에 공백을 추가 할 수 있습니다.

Answer 4

사용 마진이나 패딩

CSS :

#divCenter 
{ 
    /*display:inline-block;*/ /*if need*/ 
    width:98%; /*your value*/ 
} 
#divCenter img 
{ 
    margin-right: 10px;  
}