在一个div的中心对齐水平多张图片 [英] Aligning multiple images horizontally in the center of a div

问题描述

我有一个div，我想在中心对齐的该div多个图像。所有的图像都具有相同的高度和宽度的16像素。问题是，我可以集中他们将拥有以下额外的空间，但是当我使用显示：块将其删除，他们是左对齐了。这是我的code：

I have a div and I want to align in the center of that div multiple images. All of the images have the same height and width of 16px. The problem is that I can either center them and have the extra space below but when I use the display:block to remove it, they are aligned to the left again. Here's my code:

DIV我想包含图片：

div which I want to contain the images:

.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元素，使它们可以对齐一个接一个，彼此一起水平对齐。

The above class has the properties needed in general. So I want to create a class for the img elements so that they can be aligned one next to each other and all together aligned horizontally.

任何工作的建议？ ：）

Any working suggestions?! :)

推荐答案

浮动块级别的项目将它推到左边或右边。 显示：inline-block的关于IMG。并删除了float和立场声明。然后文本对齐：中心的div容器

Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.

http://jsfiddle.net/B6Jsy/

我用一个div作为假IMG但它应该是一样的。

I used a div as a fake img but it should work the same.

这篇关于在一个div的中心对齐水平多张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！