Need 3 divs to be center aligned side by side

Issue

I need three buttons aligned side by side. float:left just floats the elements to the left (I want them center-aligned).

I have already specified display:inline block and vertical align:top

div.rotateBtn input {
  background-image: url("");
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

.alignme {
  width: 1000px;
  height: 1000px;
  text-align: center;
}

<div class="alignme">

  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</div>

Here is the fiddle: https://jsfiddle.net/4sgakgck/

Solution

Your display:inline block is on the wrong elements.

This should be all you need:

.alignme {
  text-align: center;
}

.alignme > div {
  display: inline-block;
}

Example:

div.rotateBtn input {
  background-image: url("");
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.randomBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

div.nextBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100px;
  background-position: center;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}

.alignme {
  height: 1000px;
  text-align: center;
}

.alignme > div {
  display: inline-block;
}

<div class="alignme">

  <div class="rotateBtn">
    <input type="button" value="" onclick="flipCard()">
  </div>
  <div class="randomBtn">
    <input type="button" value="" onclick="randomiseCard()">
  </div>
  <div class="nextBtn">
    <input type="button" value="" onclick="nextCard()">
  </div>
</div>

Answered By - Turnip