需要3个div并排排列

Question

我需要并排排列三个按钮。 float：left只是将元素浮动到左边（我希望它们居中对齐）。

我已经指定了display：inline block和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>

这是小提琴： https://jsfiddle.net/4sgakgck/

Answer 1

您的display:inline block出错了。

这应该是你所需要的：

.alignme {
  text-align: center;
}

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

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flexbox。

div.rotateBtn input {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: center;
  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;
  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;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px;
}
.alignme {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: 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>