1

我正在做的页面上有一个元素，需要显示 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>

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

谢谢！

4

2 回答 2

0

我猜你希望它们都居中并相互重叠（垂直）。我只会使用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 居中，您将不会看到任何视觉差异。

如果我不理解您的问题，请告诉我，我会尽力提供帮助。

更新

<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) 的宽度。我不知道图像之间的图像大小差异有多大，但这会改变图像之间的差距。如果它们的大小相同，那么一切看起来都应该是均匀的。想什么呢？

于 2012-07-02T01:51:06.597 回答
0

由于以下声明，它们出现在左侧多于右侧：

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

你给他们一个 20px 的右边距，这有效地将他们推到左边。摆脱那个边距，它们会显得更加居中。

于 2013-06-19T09:01:04.313 回答