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

Question

我有一个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元素创建一个类，以便它们可以彼此相邻对齐并且可以水平对齐。

有任何工作建议吗？ :)

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;
}