divの中心に複数のイメージを水平に整列する

Question

私はdivを持っており、divの複数のイメージの中央に揃えたいと思います。すべての画像の高さと幅は同じで16pxです。問題は、それらを中央に置いて、余分なスペースを持つことができることです。ディスプレイを使用してブロックを削除すると、再び左に揃えられます。ここに私のコードは次のとおりです。私は、画像を入れたい

DIV：

.cell{ 
    position: relative; 
    float: left; 
    width: 300px; 
    min-height: 22px; 
    border-bottom: 1px solid #000; 
    border-right: 1px solid #000; 

    line-height: 22px; 
    font-family: Arial, Verdana; 
    font-size: 12px; 
    color: #000; 
    text-decoration: none; 
    text-align: center; 

    margin-bottom: 2px; 
    margin-right: 2px; 
} 

上記のクラスは、一般的に必要な特性を有しています。 img要素のクラスを作成して、互いに隣接して整列させ、すべてを水平に整列させることができます。

作業中の提案はありますか？ :)

Answer 1

ブロックレベルの項目をフローティングすると、左または右にプッシュされます。 IMGの "display：inline-block"そして、浮動体と位置のステートメントを削除します。次に、コンテナdivの "text-align：center"

http://jsfiddle.net/B6Jsy/

私は偽物IMGとしてdiv要素を使用しますが、それは同じように動作するはずです。どのようないくつかのHTMLコードについてだけでなく

Answer 2

<div class="Image">FIRST</div> 
<div class="Image">SECOND</div> 

.ImageHolder{ 
text-align:center; 
} 

.Image{ 
display:inline-block; 
}