html - margin :自动转换为多个内联图像

我正在进行这种设计，但目前仍处于困境。
这是我的简化设计：
jsFiddle

如您所见，我在一个div中有多个图像。
我需要做的是使它们看起来像这样：



因此，它们与边界之间具有自动边距。

垂直对齐的解决方案是使图像的高度为50px，因为#container div具有固定的高度，或者使用具有display: inline-block和vertical-align: middle属性的辅助div，但是我不知道该怎么做。因为它不是固定宽度，所以请使用水平对齐。

我尝试了display: block和margin: 0 auto，但是它不起作用。它不再在同一行上显示图像。有任何想法吗？

最佳答案

在父级上使用text-align:center

JSfiddle Demo

的CSS

*{
    margin: 0px;
    padding: 0px;
}

body, html {
    width: 100%;
}

#container {
    width: 50%;
    height: 50px;
    display: block;
    margin: auto;
    border: 1px solid blue;
    line-height: 50px;
    text-align: center;
}

#container img{
    width: 30px;
    height: 30px;
    margin: 0 25px;
    vertical-align: middle;
}

关于html - margin :自动转换为多个内联图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25684963/