Formatting divs inside div container

I made a simple example to test this out. I have one wrapper div with two other div elements inside it set to display: inline-block;. The two inner div elements fall on the same line, but how do I get them centered on the half of the main div they belong to? For example, the blue box in the middle of the left side of the main div and the red box in the middle of the right side of the main div. Code and screenshot below.

div

div

display: inline-block;

div

div

div

div

Also, the inspector shows a width of 204px for the main-box div and even when I set padding and margin to 0 there's still a gap on the bottom between the blue/red boxes and the border of the main-box. How do I get rid of the gap?

main-box

div

padding

margin

main-box

.box-test
height: 200px;
display: inline-block;
width: 30%;
box-sizing: border-box;


#blue
background-color: blue;


#red
background-color: red;


#main-box
text-align: center;
border: 1px solid black;


<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>

4 Answers
4

Use flexbox and margin:auto on both elements and they will get centred like you want and you will also get rid of all the whitespace issues:

margin:auto

.box-test
height: 200px;
margin:auto;
width: 30%;
box-sizing: border-box;


#blue
background-color: blue;


#red
background-color: red;


#main-box
border: 1px solid black;
display:flex;


<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>

What you should use is a flexbox for the wrapper. When defining space-around for the 'horizontal alignment' you will get what you want.

space-around

For more details on flexbox see here

*
box-sizing: border-box;


#main-box
border: 1px solid black;
display: flex;
justify-content: space-around;

.box-test
height: 200px;
width: 30%;


#blue
background-color: blue;


#red
background-color: red;


<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>

You can use flexbox with property justify-content: space-around on the wrapper.

justify-content: space-around

.box-test
height: 200px;
width: 30%;


#blue
background-color: blue;


#red
background-color: red;


#main-box
display: flex;
justify-content: space-around;
border: 1px solid black;


<div id="main-box">
<div id="blue" class="box-test"></div>
<div id="red" class="box-test"></div>
</div>

#main-box
text-align: center;
border: 1px solid black;
font-size:0;



Why it is so?
Please read this:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Removing whitespace between HTML elements when using line breaks

https://jsfiddle.net/evzckd3w/

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.