无法对齐图像与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？