html - 我怎样才能让这个 <div> 居中？

Question

这是正在发生的事情:http://prntscr.com/g67d7p

如您所见，“支付框”没有正确居中。我尝试了多种方法来解决这个问题，但都失败了。

CSS:

div[id=rollover-button]{
    height: 100px;
    width: 160px;
    background-color: #E4ECF1;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: gray;
    font-weight: 300;
    display: inline-block;
    float: left;
}

div[id=payout-button]{
    height: 100px;
    width: 160px;
    background-color: #E4ECF1;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: gray;
    font-weight: 300;
    display: inline-block;
}

div[id=chance-button]{
    height: 100px;
    width: 160px;
    background-color: #E4ECF1;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: gray;
    font-weight: 300;
    display: inline-block;
    float: right;
}

HTML:

<div id="buttons">
            <div id="rollover-button">
                >50.00
            </div>
            <div id="payout-button">
                2.0000x
            </div>
            <div id="chance-button">
                50%
            </div>
        </div>

如何解决这个问题，使支付框完美居中？

Answer 1

您可以使用 flex 属性。我已经从元素中删除了所有 floats 和 display 属性，并在父级上使用了 flex。希望这对你有帮助。

#buttons {
  display: flex;
  justify-content: space-between;
}

div[id=rollover-button] {
  height: 100px;
  width: 160px;
  background-color: #E4ECF1;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  color: gray;
  font-weight: 300;
}

div[id=payout-button] {
  height: 100px;
  width: 160px;
  background-color: #E4ECF1;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  color: gray;
  font-weight: 300;
}

div[id=chance-button] {
  height: 100px;
  width: 160px;
  background-color: #E4ECF1;
  text-align: center;
  line-height: 100px;
  font-size: 40px;
  color: gray;
  font-weight: 300;
}

<div id="buttons">
  <div id="rollover-button">
    >50.00
  </div>
  <div id="payout-button">
    2.0000x
  </div>
  <div id="chance-button">
    50%
  </div>
</div>