Center multiple DIV:s

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