Center divs within div

Question

Trying to center a few divs within a div. Can't seem to get it to work. Any takers?

Result should be all three divs in the middle, 50 px apart.

JsFiddle

<div class="centerDivs">
  <div style="margin-right:50px;float:left;">
    <div>Testing</div>      
    <div>1,000,000 php</div>
  </div>
  <div style="margin-right:50px;float:left;">
    <div>Testing</div>      
    <div>1,000,000 php</div>
  </div>
  <div style="margin-right:50px;float:left;">
    <div>Testing</div>      
    <div>1,000,000 php</div>
  </div>
</div>

Answer 1

If you use float, you can't really center your divs. Delete float preperties.

You can try to use flex, for example:

.centerDivs{
  display: flex;
  justify-content: center:
}

Hope it'll help

Answer 2

Transform the boxes in inline-block elements and text-align: center to the parent:

https://jsfiddle.net/fmtnbj8z/5/

.centerDivs {
  text-align:center;
}
.centerDivs div {
  display:inline-block;
  text-align:left;
}

Answer 3

You can do this:

CSS

.centerDivs {
  display: block;
  text-align: center;
}

.item {
  display: inline-block;
  padding: 0px 25px;
}

HTML

<div class="centerDivs">
  <div class="item">
    <div>Testing</div>
    <div>1,000,000 php</div>
  </div>
  <div class="item">
    <div>Testing</div>
    <div>1,000,000 php</div>
  </div>
  <div class="item">
    <div>Testing</div>
    <div>1,000,000 php</div>
  </div>
</div>

DEMO HERE