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>

水平に表示されます。行のスパンが 940px (span12) 幅になるように、右端の画像を div の右端に揃えました。画像間で画像サイズがどれほど大きく異なるかはわかりませんが、画像間のギャップの見え方が変わります。それらが同じサイズであれば、すべてが均一に見えるはずです。何だと思う？

于 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 に答える