如何在不使用浮动的情况下防止居中图像上的换行？

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. 在text-align: center
上设置#socialMediaHolder
2. 在display: inline-block;
上设置#socialMediaHolder img

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

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

Answer 2

将图片的显示样式更改为inline。

http://jsfiddle.net/J6KMU/5/

修改

将包装器div样式设置为text-align:center，使图像居中。

http://jsfiddle.net/J6KMU/6/