centering inline-block elements when flexbox and classic techniques don't work

Question

I have tried centring the smaller circles every-way I can think of and they either don't get centred or the centring is not responsive-- meaning it fails when the viewport is changed.

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

I have tried flexbox:

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

I have tried giving wrapping the .small elements in a container and giving that a fixed width and centring with -0.5 of the width:

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

I also figured since they were inline-block elements I could use text-align:center; on the .small element, but that didn't work.

#small{
   text-align:center;
}

I can't seem to figure out how to centre 3 small circles so that the middle one is in the vertical-middle like the bigger circle ( .big ), which I centred using the 2nd technique.

Does anyone have any ideas on how to do this?

score 1 · Answer 1 · answered Aug 03 '15 at 07:26

1

You have a mistake. Your inline-block elements has a left of 50% (even you will center, there are a 50% more to the right).

You can solve like this:

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

answered Aug 03 '15 at 07:26

Marcos Pérez Gude

21,869
4
38
69

I just tried it in developer tools. When I give the container the `text-align:center;` and remove the 50% left, It changes it, but it is not centred. – wordSmith Aug 03 '15 at 07:29
You have a width in the `body` of 1332 pixels, I don't know why, but it is bigger than my screen. Your total content has more that 100% of the width. your problem seems to be it. I can't see what produces it. – Marcos Pérez Gude Aug 03 '15 at 07:35

score 0 · Accepted Answer · edited May 17 '21 at 12:58

you can try this:

DEMO:

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

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

        <div class="small">
            text
        </div>       

        <div class="small">
            text
        </div>       
    </div>
</div>

fiddle here

What i did is simple.. just make #main and #smallContainer position relative, remove the left and width from #smallContainer to make it expand only according to its children, then put margin:0 auto; to #smallContainer. This way even if the viewport change you're sure the .small div's are centered.

EDIT

I updated the fiddle, I just removed the display:inline-block; from .small in css.

Dont forget to mark this as answer if it gives you what you need my friend :)

Thank you! it worked, but now it is just a column of all 3 smaller circles vertically. I need the 3 circles to be in one horizontal line. — wordSmith, Aug 03 '15 at 07:52
yup-- I did it with inline-flex and it works perfectly now! Thank you. — wordSmith, Aug 03 '15 at 08:05

centering inline-block elements when flexbox and classic techniques don't work

2 Answers2

Linked