Center multiple DIV:s - html

Question

Having trouble centering some logos. I tried to used margin: auto as well as text-align: center but can't seem to get it working.
JSfiddle

Answer 1

would you like something like this?
I add this class
#footer-container {
width: 100%;
display: inline-block;
text-align: center;
}
and made some changes in this class ( ex: remove the float )
.button-circle {
display: inline-block;
width: 66px;
height: 50px;
padding: 0px;
margin-top: 20px;
margin-right: 50px;
}

Answer 2

It will looks like this .I think that it is your desire result!

Answer 3

Try:
#footer-container{
text-align:center;
}
.button-circle:last-of-type{ /*remove right margin from last div*/
margin-right:0;
}
.button-circle {
display: inline-block;
}
NOTE:
inline-block adds white-space between elements. Write elements on same line to remove white-space.
Write:
<div class="button-circle">.........</div><div class="button-circle">...
Instead of:
<div class="button-circle">
.......
</div>
<div class="button-circle">
.......
</div>
DEMO here.

Answer 4

I have given both the code html and css check it
<div id="footer-container">
<div id="followicon">
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/1faoLxr.jpg" style="width: 66px"></div>
<div class="block">facebook</div>
</div>
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/hVdiFAx.jpg" style="width: 66px"></div>
<div class="block">twitter</div>
</div>
<div class="button-circle">
<div class="bild"><img src="http://i.imgur.com/WJGtp0A.jpg" style="width: 66px"></div>
<div class="block">vimeo</div>
</div>
</div><!--end of the followicon -->
</div>
<div>
//css code
#footer-container {
width:100%;
height:200px;
border:1px solid #000;
}
#followicon {
position:relative;
width:350px;
height:200px;
margin:0px auto;
}
.block{
position:relative;
width: 66px;
height: 25px;
top:0px;
z-index:100;
opacity: 0;
margin-top: -5px;
text-align: center;
text-transform:uppercase;
}
.button-circle {
display: inline;
float: left;
width: 66px;
height: 50px;
padding: 13px;
margin-top: 20px;
margin-right: 10px;
margin-left:13px;
}
.bild {
position:relative;
height: 100%;
top: 0px;
}