web-dev-qa-db-ja.com

divの中央に複数の画像を水平に配置する

Divがあり、そのdivの中央に複数の画像を配置したい。すべての画像の高さと幅は同じ16ピクセルです。問題は、それらを中央に配置して下に余分なスペースを確保できることですが、display：blockを使用して削除すると、再び左に揃えられます。私のコードは次のとおりです。

画像を含めたい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要素のクラスを作成して、それらを互いに隣り合わせに配置し、すべて一緒に水平に配置できるようにします。

何か提案はありますか？！ :)

htmlcssimagecenteralignment
24
Dimitris Damilos

ブロックレベルのアイテムをフローティングすると、左または右にプッシュされます。 IMGの「display：inline-block」。そして、floatおよびpositionステートメントを削除します。次に、コンテナdivの「text-align：center」。

http://jsfiddle.net/B6Jsy/

Divを偽のimgとして使用しましたが、同じように機能するはずです。

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}
8
molu2008