在一个div中水平居中对齐多张图片

Question

我有一个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 元素的类，以便它们可以相互对齐并水平排列。

有什么有效建议吗？！ :)

- Dimitris Damilos

---

还有一些HTML代码怎么样？ - yunzen

这是我准备的一个小代码片段，只是为了让事情开始运转：http://jsfiddle.net/ah2Uw/ - PREEB

所以你想让div在底部紧贴图片吗？我对你真正想要做什么感到困惑。你有min-height: 22px;，因此由于你的图片是16px，底部会有额外的空间。 - PREEB

thepriebe 您是正确的。在您的解决方案中，我只需添加了单元格的高度和宽度，所有内容都能正常工作。感谢您的快速回复！ :) - Dimitris Damilos

Answer 1

将块级元素浮动到左侧或右侧。在IMG上使用"display:inline-block"。然后删除浮动和位置语句。然后，将容器div的"text-align:center"。

http://jsfiddle.net/B6Jsy/

我使用了一个div作为虚拟图像，但它应该可以正常工作。

- jmbertucci

---

谢谢，这对我今天非常有帮助。 - drew010

好答案！帮了我很多忙！ - Rameez Hussain

@jmbertucci 感谢您拯救了我！ - OscarRyz

Answer 2

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}

- molu2008