Centering inline-block elements

[Aenwyn]

Surprise surprise, I'm here yet again with another code related question. So, on my members' profiles, I want to add combat stats since it's a combat based RP. I wrote the following code myself, so if your eyes burn, I apologise



/* --- COMBAT --- */



.combat {margin: auto;

   margin-bottom: 7px;

   text-align:center;

   border: 1px solid @container_outer_border_color; position: relative;

   width: 150px !important;

   height: 45px !important;

   background-color: @bg_color_3;

   display: inline-block;

}

   



.combatstuff {text-align:center;

   font:20px Georgia serif;

   color: @bg_color_2;

   line-height: 35px !important;

   display: inline-block;

}
My problem is, I need that inline-block to display my boxes next to each other, like this:



But with the inline-block, I can't find a way to get them to be in the middle of the screen.



I don't want them to be as wide as the whole post, OOC Name, etc box below, which is what caused this whole problem lol!

When I try to look up solutions, I find stuff about parent and child and that's a whole new world for me.

Can anyone help me/tell me how to center them and have them in one row? I did think about a table, but I'm going to be honest, I saw a .show-user table and I don't know how to make one myself

Thanks a lot in advance for any help and tolerating my bi-daily code questions :')

[Scott]

Aenwyn -

For the HTML portion, add a div around the combat divs (meaning put the div's with the class 'combat' in a div) and give that div a class "comcen"

Should look like this:




Then in your css for the class "combat", remove margin: auto;

Next add the following class code:

.comcen {
display:flex;
justify-content:center;
}


That should give you what you want.

[Aenwyn]

Aug 5, 2024 14:01:17 GMT -8 Scott said:

Aenwyn -

For the HTML portion, add a div around the combat divs (meaning put the div's with the class 'combat' in a div) and give that div a class "comcen"

Should look like this:




Then in your css for the class "combat", remove margin: auto;

Next add the following class code:

.comcen {
display:flex;
justify-content:center;
}


That should give you what you want.

Thank you : ) It indeed gave me what I wanted!