How to center this on screen

Question

So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.

This is the CSS:

<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
    margin:auto, auto;
}
</style>

This is the HTML:

<div class="main_block">
<a href="#"><img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"></a> <a href="#"><img class="social" src="http://lorempixel.com/400/200/" alt="Google +"></a> </a>
</div>

Help is much appreciated.

Answer 1

FIDDLE

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;
}