You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}