ダイナミックな幅と高さを維持しながらdivの束を中央に浮かべてください

Question

私は大きなdivを持っています。それはサムネイルの束を含んでいます。私は、div内のサムネイルをdivの内側に配置し、divをページの中央に配置したいと思います。しかし、divの幅を動的にしたいので、すべての解像度ですべてのサムネイルを中央に表示することができます。どうすればこれを達成できますか？私はこのCSSでそれを中心に試してみた

<div id="container"> 
    <div class="thumb"><img /></div> 
    <div class="thumb"><img /></div> 
    <div class="thumb"><img /></div> 
    <div class="thumb"><img /></div> 
    <div class="thumb"><img /></div> 
    <div class="thumb"><img /></div> 
</div> 

：ここ

は、私がこれまで持っているものの作品左の各周りので、彼らはすべてのフロートを中心に： 問題は、私が浮くする代替が必要ですその他。私が現在持っているのは、間違ったブラウザの幅に置かれているだけです。中心にはありません。

#container{margin:auto;width:80%} 
.thumb{padding:60px;float:left} 

float：centerのような操作を行うためのアイデアはありますか？

Answer 1

まず、すべての子供に同じIDを与えることはできません<div>;それは無効なHTMLです。私はこのような何かしたい

：また

#container{margin:0 auto;width:80%;text-align:center} 
#container div{padding:60px;display:inline} 

<div id="container"> 
    <div><img /></div> 
    <div><img /></div> 
    <div><img /></div> 
    <div><img /></div> 
    <div><img /></div> 
    <div><img /></div> 
</div> 

を、あなただけの<span>秒にすべて<div> Sを変更し、display:inline CSSのディレクティブを削除することができます。また、<div>または<span>のアイデアを完全に削除し、タグに直接paddingを直接適用することもできます。

EDIT：他の回答に投稿されたコメントを見ると、上記の私の答えがまだあなたにはあまり役立たないようです。これはあなたが達成しようとしている行動ですか？親指のdivにhttp://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center} 
#container span{display:inline-block;text-align:left} 

<div id="container"> 
    <span> 
     <img /> 
     <img /> 
     <img /> 
     <br /> 
     <img /> 
    </span> 
</div> 

Answer 2

使用display: inline-block。これは、あなたがテキストの他の作品のように扱うことができますが、サイジングにその固有の「boxiness」を保持：

#container {margin: auto; width: 80%; text-align: center; } 
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }