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多图像的中心对齐。所有图片的高度和宽度都是16px。问题是,我可以将它们居中,并在下面有额外的空间,但是当我使用display:block来删除它们时,它们又会再次对齐到左边。这是我的代码:
div which I want to contain the images:
我想要包含图像的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;
}
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.
上面的类具有一般需要的属性。因此,我想为img元素创建一个类,这样它们就可以彼此对齐,并水平对齐。
Any working suggestions?! :)
任何工作建议吗? !:)
2 个解决方案
#1
42
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.
浮动一个块级项目将推动它向左或向右。“显示:inline-block”IMG。并删除浮动和位置语句。然后“text-align:center”用于容器div。
http://jsfiddle.net/B6Jsy/
I used a div as a fake img but it should work the same.
我使用了一个div作为一个假img,但它应该是一样的。
#2
5
<div class="Image">FIRST</div>
<div class="Image">SECOND</div>
.ImageHolder{
text-align:center;
}
.Image{
display:inline-block;
}
#1
42
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.
浮动一个块级项目将推动它向左或向右。“显示:inline-block”IMG。并删除浮动和位置语句。然后“text-align:center”用于容器div。
http://jsfiddle.net/B6Jsy/
I used a div as a fake img but it should work the same.
我使用了一个div作为一个假img,但它应该是一样的。
#2
5
<div class="Image">FIRST</div>
<div class="Image">SECOND</div>
.ImageHolder{
text-align:center;
}
.Image{
display:inline-block;
}