Keep images from breaking to next line without float - html

Question

I have a footer with social media icons. I want the icons arranged in a 3 x 3 grid
like below.
# # #
# # #
# # #
I also want it centered in a div. The issue that I'm running into, is that when I float the elements left to keep them on the same line my
margin-left:auto;
margin-right:auto;
Doesnt work, and they just align left. I need a solution that will work for mobile since my whole site is responsive.
Here is the HTML
<div class="d-all m-all" id="mainFooter">
<div class="d1-d4 m-all" id="socialMedia">
<div id="centerIcons">
<img src="images/fb_icon_vi.png"><img src="images/tw_icon_vi.png"><img src="images/in_icon_vi.png">
</div>
</div>
<div class="d5-d8 m-all" id="contact">
Contact
</div>
<div class="d9-d12 m-all" id="awards">
awards
</div>
</div>
And here is the CSS
#mainFooter{
background-color:black;
height:250px;
}
#socialMedia{
background-color:green;
}
#socialMedia img{
display:block;
}
#centerIcons{
background-color:yellow;
width:50%;
margin-left:auto;
margin-right:auto;
height:75px;
}
#centerIcons img{
margin-left:auto;
margin-right:auto;
}
The whole site can be seen HERE

Answer 1

I guess you want to something like this, right?
#socialMedia img {
display: inline-block;
}
#centerIcons{
background-color:yellow;
width:50%;
height:75px;
max-width: 171px;
margin: 0 auto;
}
#centerIcons img{
/* nothing is needed */
}
Explanation:
display: inline-block; will keep as block but not opening a new line
since #centerIcons is a DIV element, it is a block element, to make use of centering effect with margin: 0 auto; a width control is needed
so max-width: 171px; will constraint its width to a maximum of 171px (icon width 57px * 3), you may adjust as you need
Note:
About display property, please refer to W3C's visual formatting model.
About box model specification, you may refer to W3C's box model.
Depends on your browser compatibility plan, max-width does not supported in IE8 below and IE8 have some bugs. For details, you may refer to online compatibility chart like this.
If you are using jQuery and really mean to support IE6-8, you may consider using polyfill such as Scott Jehl's Respond.js
Edit: I think #Matt Smith's answer is what you want, I may have misinterpreted your meaning. Anyway, for your reference.

Answer 2

<img> is a replaced inline element (by default). The image elements sit beside each other like words. Therefore there's no need to change their display type to block (as you have done in the live demo).
I want the icons arranged in a 3 x 3 grid
In order to achieve that, you could wrap each 3 images by a wrapper, and add text-align: center to that element to align the inline images horizontally.
EXAMPLE HERE.
<div id="centerIcons">
<div class="wrapper">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
<div class="wrapper">
<img src="images/4.png">
<img src="images/5.png">
<img src="images/6.png">
</div>
<div class="wrapper">
<img src="images/7.png">
<img src="images/8.png">
<img src="images/9.png">
</div>
</div>
.wrapper {
text-align: center;
}

Answer 3

Add text-align: center to the #centerIcons {} rule and display: inline-block to your #centerIcons img {} rule:
#centerIcons img {
text-align: center;
}
#centerIcons img {
display: inline-block;
}