0

中央に配置したいDIVがあります。ページはすべてのウィンドウサイズで用途が広いと想定されているため、幅や長さは定義されていません（ウィンドウのサイズを変更すると、ページが調整されます）。DIVを中央に配置しながら、これを維持する必要があります。

これが私が視覚補助のために意味するものの写真です。

http://imgur.com/NZ6OSWn,LPkYzwM#1

これらすべての画像を保持するDIV「コンテナ」は中央に配置する必要があります。写真では、右側のギャップに合わせて左揃えになっています。

見やすくするために、jsfiddleのコードを次に示します。

http://jsfiddle.net/fZ4CL/

#container{
    display:box;
    float:left;
    margin-top:40px;
    left:50%;
}
#thumb{
    display:box;
    float:left;
    top:0;
    left:0;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}


<body>
<img src='background/001.JPG' class='background'/>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
</div>

</body>
4

4 に答える 4

1

まず、同じIDを持つ複数の要素を持つことはできません。IDが。の複数の要素がありますthumb。あなたはそれをすることはできません。代わりにクラスを使用してください。

次にdisplay、サムネイルのinline-blockとtext-alignコンテナのを次のように設定しcenterます。

#container {
    text-align: center;
}
.thumb {
    display: inline-block;
}

あなたのコードの他のいくつかの間違い：

  • display: boxあなたが望むものはほとんどありません。あなたはおそらくblock代わりに欲しいでしょう。
  • lefttopが設定されていない限り、何の効果もありませんposition。
  • float: leftあなたはそれが不必要なところに奇妙な魅力を持っているようです。
  • 同じ間隔を保つために、 amarginをaに変更する必要がありました。padding

結果を見てください。

于 2013-03-24T21:19:38.333 に答える
0

マージン：0自動; #containerのmargin-topの前：

また、なぜfloat：をコンテナに残して使用するのですか？

于 2013-03-24T21:04:51.660 に答える
0

これでうまくいくはずです。

#container {
   margin-left: auto;
   margin-right: auto;
}
于 2013-03-24T21:05:30.620 に答える
0

定義された幅を指定しない限り、ブロック要素を中央に配置することはできません。それ以外の場合、ブラウザはその要素に使用可能な幅を与えます。これは、要素がすでに中央に配置されていることを意味します（左側にゼロのスペース、右側にゼロのスペースがあります）。

min-widthおよび/またはを使用して、単一の値max-widthよりも柔軟な定義済みの幅を要素に指定し、次に、親要素で使用可能な未使用の幅内で要素を水平方向に中央揃えするスタイルを要素に指定します。widthmargin: 1em auto

于 2013-03-24T21:08:36.517 に答える