Centering inline blocks when flexbox and classic methods fail

Question

On the page here: https://irfan.io

I tried to center the smaller circles anyway, which I can think of, and they either do not center, or the centering does not respond - this means that it crashes when you change the viewing area.

They are all of the .small class, and they are children of #main.

I tried flexbox:

#main{ display:flex; align-items:center; justify-content:center; } .small{ display:flex; } 

I tried to wrap the .small elements in the container and assign a fixed width and center with -0.5 width:

 #smallContainer{ width:500px; margin-left:-250px; position:relative; left:50%; } 

I also realized that since they were elements of an inline block, I could use text-align:center; for the .small element, but this did not work.

 #small{ text-align:center; } 

I can't figure out how to center 3 small circles so that the middle is in the vertical middle, like a big circle (.big), which I focused on using the second method.

Does anyone have any ideas on how to do this?

Answer 1

you can try the following:

HTML:

 <div id="main"> <div id="smallContainer"> <div class="small"> text </div> <div class="small"> text </div> <div class="small"> text </div> </div> </div> 

CSS

 #main{ display:flex; align-items:center; justify-content:center; position:relative; } .small{ display:flex;. text-align:center; display:inline-block; width:100px; height:100px; border:1px solid black; } #smallContainer{ margin-left:0 auto; position:relative; } 

the violin is here

What I did is just .. just make #main and #smallContainer position relative, remove the left and width from #smallContainer so that it expands only to fit its children, and then put margin: 0 auto; at #smallContainer. That way, even if you change the viewport, you are sure that the .small div is centered.

EDIT

I updated the fiddle, I just deleted the display: built-in unit; from .small to css.

Remember to mark this as an answer if it gives you what you need, my friend :)

Answer 2

You have a mistake. The elements of your built-in block are left 50% (even you center, 50% more on the right).

You can solve the following:

 #smallContainer { text-align: center; } .small { left: 0; }