我该如何居中 <div> ？

Question

Here's what's happening: http://prntscr.com/g67d7p

As you can see, the "payout box" is not centering correctly. I tried multiple things to fix this but they all failed.

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>

How can I fix this to make the payout box perfectly centered?

Answer 1

You can use the flex property. I have removed all floats and display properties from elements and used flex on the parent. Hope this helps you.

 #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

Just add

 #buttons > div {
  width: 33.33%;
}

instead of fixed width for each button class div. (This will work with all browsers responsively)

OR if you want some space between boxes then use

#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

Try adding the following.

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

I would use a flexbox for the container and put space in between the flex items.

 #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

Try This, Simple method to achieve this.

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

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

And, I want to say One thing.

I think you can reduce your CSS Code.

Answer 7

You can use the tables that is the easy way. If you want to use div itself "Go for bootstrap."

That must help.