Html 在div的中心水平对齐多个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9434022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning multiple images horizontally in the center of a div
提问by Dimitris Damilos
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 的中心对齐多个图像。所有图像的高度和宽度都相同，均为 16 像素。问题是我可以将它们居中并在下方留出额外的空间，但是当我使用 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?! :)
任何工作建议？！:)
回答by jmbertucci
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.
浮动块级项目会将其推向左侧或右侧。IMG 上的“显示：内联块”。并删除浮动和位置语句。然后为容器 div 设置“text-align:center”。
I used a div as a fake img but it should work the same.
我使用 div 作为假 img，但它应该可以正常工作。
回答by molu2008
<div class="Image">FIRST</div>
<div class="Image">SECOND</div>
.ImageHolder{
text-align:center;
}
.Image{
display:inline-block;
}
