Why is margin auto not working to center a div containing links with images

Question

I Know this is not an uncommon question and I have tried any of the solution to pervious question That i could find

I have the following bootstrap column

<div class="col-sm-12">
   <div class="social-child-row">
      <a href="" ><img width="35" height="35" src="imgs/gplus2.png" alt="gplus" /></a>
      <a href="" ><img width="35" height="35" src="imgs/stackoverflow.png" alt="stackoverflow"/></a>
      <a href="" ><img width="35" height="35" src="imgs/twitter.png" alt="twitter"/></a>
      <a href="" > <img width="35" height="35" src="imgs/github.png" alt="github"/></a>
      <a href="" ><img width="35" height="35" src="imgs/email.png" alt="email"/></a>
   </div>
</div>

and styling:

.social-child-row{
    width:100%;
    margin: auto;
}

which results in the following

I have tried setting the width to a fixed width (200px), I have tried display: inline, display: block-inline and I have even tried wrapping the the links in a list and displaying in line. The only time Margin works is if I specify and exact size like 30px

a JSFiddle Can be found here

some of the Code is built on top of the HTML result of this wordpress theme in case it is relevant

Answer 1

In your fiddle I imagine you're talking about .social-child-row?

Simply set it to display:block; and text-align:center;

It contains images which are inline elements, treated effectively like text content, as such by aligning the text for the parent to center, the images will be centered.

There are really two main ways of centering content:

1. Text Alignment (inline elements)

Set the child elements to either display:inline or display:inline-block, then set the parent container to text-align:center, the children will center in the parent- depending on whatever its width

2. Margin Alignment (block elements)

If the child content is block level (display:block) set text:align:center; on the parent, then give the child margin:0 auto and a width less than that of the parent

Answer 2

.social-child-row{
    width:100%;
    text-align: center;
}

Fiddle: http://jsfiddle.net/6K5hN/

Answer 3

You should assign width on the div you want to align on center OR you can just assign the display as inline-block not block-inline for this to work. Replace the style with:

.social-child-row{
    /* width: (put here for optional); */
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 auto;
}

Use 0 margin for top and bottom since your aim only is to center horizontally in this case. *display: inline; and zoom: 1; are for earlier versions of IE compatibility.