트위터 부트 스트랩으로 이미지를 정렬 할 수 없습니다.

Question

내가하고있는 페이지에 요소가 있습니다. 중앙에서 정렬 된 3 개의 이미지를 표시해야합니다. (가로)

그러나 화면에서 정확하게 가운데 맞춤 할 수 없습니다. 오른쪽보다 왼쪽에 더 많이 나타나거나 스팬 컨테이너의 왼쪽에 정렬 된 것처럼 보입니다.

아무도 도와 줄 수 있습니까?

다음은 HTML

<div class="row"> 


        <div class="span12 logo-container"> 
         <div class="span9 logo-wrapper"> 
         <div class="logo">         
          <img src="img/siemens_log.png" />        
         </div> 



          <div class="logo"> 
           <img src="img/merck_logo.png" /> 
          </div> 



         <div class="logo archdaily"> 
          <img src="img/archdaily_logo.png" /> 
         </div> 
        </div> 
       </div> 


     </div> 

그리고

.logo-wrapper 
{ 
    float:none; 
    margin:0 auto; 


} 
.logo-container 
{ 

    float:none; 
    margin:0 auto; 


} 


.logo 
{ 
    float:left; 
    margin: 20px 20px 0 0; 
    text-align: center; 

} 



.archdaily 
{ 
    margin-top: 5px; 
} 

당신을 감사합니다 CSS입니다!

Answer 1

그들은 때문에이 선언의 오른쪽보다 왼쪽으로 더 많이 나타납니다 당신은 그들에게 효과적으로 왼쪽으로 그들을 밀어 20 픽셀의 오른쪽 여백을 제공하고

.logo { 
    float:left; 
    margin: 20px 20px 0 0; 
    text-align: center; 
} 

. 그 마진을 제거하면 더 중심에 서게됩니다.

Answer 2

나는 모두 가운데에 놓고 서로 꼭대기에 놓기를 원한다고 생각합니다. 그냥 text-align: center;을 사용합니다. 그것은 텍스트와 이미지 (div가 아닌)에서 작동합니다.

예 ...

<div class="container"> 
    <div class="row"> 
    <div class="span12"> 

     <div style="text-align: center;"> 
     <img src="img/siemens_log.png" /> 
     </div> 

     <div style="text-align: center;"> 
     <img src="img/merck_logo.png" /> 
     </div> 

     <div style="text-align: center;"> 
     <img src="img/archdaily_logo.png" /> 
     </div> 

    </div> 
    </div> 
</div> 

뭔가 당신은 이미 알고 있습니다 ...주의합니다. 네가 margin: 0 auto;을 사용하는 걸 봤어. 그 div div 너비를주는 경우 해당 div 중심 것입니다. 너비를주지 않으면 너비가 100 %가됩니다. 그리고 수평으로 100 %에 걸쳐있는 div를 가운데에 놓으면 볼 수 있듯이, 시각적 인 차이는 없습니다.

귀하의 질문을 이해할 수없는 경우 알려 주시면 도와 드리겠습니다.

UPDATE

<div class="container"> 
    <div class="row"> 

     <div class="span4" style="text-align: left;"> 
     <img src="img/siemens_log.png" /> 
     </div> 

     <div class="span4" style="text-align: center;"> 
     <img src="img/merck_logo.png" /> 
     </div> 

     <div class="span4" style="text-align: right;"> 
     <img src="img/archdaily_logo.png" /> 
     </div> 

    </div> 
</div> 

그들은 지금 수평 나타납니다. 맨 오른쪽 이미지를 div의 오른쪽 가장자리에 정렬하여 행의 범위가 940 픽셀 (span12) 너비를 차지하도록합니다. 이미지의 크기가 이미지간에 얼마나 다른지 잘 모르겠지만 이미지 사이의 간격이 어떻게 달라지는 지 알 수 있습니다. 크기가 같으면 모든 것이 고르게 보여야합니다. Whatdyathink?