無法對齊圖像與Twitter引導

Question

我有一個頁面上的元素我正在做，需要顯示3居中和對齊的圖像。 （horizo​​ntaly）

但是，我無法將它們正確地居中在屏幕上。它們顯示在左側比右側更多，或者它們看起來與量程容器左側對齊。

任何人都可以幫助我嗎？

這裏的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> 

而CSS

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

謝謝！

Answer 1

他們似乎不是因爲這個聲明的權利更向左：

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

你給他們一個20px的右邊緣，從而有效地促使他們到左邊。擺脫這一邊緣，他們會出現更多的中心。

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爲中心。如果你不給它一個寬度，那麼它將默認爲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的右邊緣對齊，這樣行的跨度將佔用940px（span12）的寬度。我不知道圖像之間的圖像大小差異有多大，但這將改變圖像之間的差距。如果它們的尺寸相同，那麼一切都應該看起來均勻。 Whatdyathink？