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

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

2 个答案: