html - 如何在不使用 float left 的情况下防止居中图像换行？

Question

Fiddle

我有 2 个 div，一个扩展 100%，另一个适合网格。第二个 div 中有 3 张图片。我想将这 3 张图片居中放置而没有任何换行符。

当我使用

#socialMediaHolder img{
    display:block;
    margin-left:auto;
    margin-right:auto;

}

它创建换行符。我尝试使用跨度并给出跨度

span{
white-space:nowrap;
}

但这行不通。我可以将图像向左浮动，但它们不会居中。

我该如何解决这个问题？

Answer 1

1. 在 #socialMediaHolder 上设置 text-align: center
2. 在 #socialMediaHolder img 上设置 display: inline-block;

演示:http://jsfiddle.net/abhitalks/J6KMU/4/

#socialMediaHolder {
    text-align: center;
}
#socialMediaHolder img {
    display: inline-block;
    ...
}