在div的中心水平对齐多个图像

Question

我有一个div,我想在div的中心对齐多个图像.所有图像都具有相同的高度和宽度16px.问题是我可以将它们居中并在下面留出额外的空间但是当我使用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元素创建一个类,以便它们可以一个接一个地对齐,并且一起水平对齐.

有什么工作建议吗？!:)

Answer 1

浮动块级项目将向左或向右推动它.IMG上的"display:inline-block".并删除float和position语句.然后容器div的"text-align:center".

http://jsfiddle.net/B6Jsy/

我使用div作为假img,但它应该工作相同.

Answer 2

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}