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

Answer 2

I'm not sure if you wanted them to stack over each other, or just to center them.

---

Stack them over each other

JSFiddle

To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.

---

Just center them

JSFiddle

This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.

Answer 3

You have to set a width on the main-block class and remove the comma.

Your style should look something like this:

.main_block
{
    width: 40em;
    margin:0 auto;
}