我怎样才能将这个<div>居中？

Question

以下是发生的事情：http://prntscr.com/g67d7p

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

CSS：

<Resource list={MyList} edit={MyEdit} show={MyShow} />

HTML：

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

如何解决此问题以使支付框完美居中？

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>

Answer 2

添加

 #buttons > div {
  width: 33.33%;
}

而不是每个按钮类div的固定宽度。 （这将适用于所有浏览器）

如果您想在框之间留出一些空格，请使用

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

#buttons > div {
    width: 33.33%;
}
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;
}

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

尝试添加以下内容。

div[id=rollover-button]{
    height: 100px;
    width: 33%;
    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: 33%;
    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: 33%;
    background-color: #E4ECF1;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    color: gray;
    font-weight: 300;
    display: inline-block;
    float: left;
}

Answer 4

我会为容器使用flexbox，并在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;
  display: inline-block;
}

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

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

尝试这种简单的方法来实现这一目标。

＆＃13;

＆＃13;

div[id=buttons]{
  margin: 0 auto; 
  text-align: center;
}
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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

div[id=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;
    display: inline-block;
}

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

而且，我想说一件事。

我认为你可以减少你的CSS代码。

Answer 7

您可以使用简单的表格。 如果你想使用div本身“Go for bootstrap。”

这一定有帮助。