Flex items aren't centering within container?

Question

I'm attempting to center the flex items, however I must be doing something wrong because it isn't working. The basic outline is that Timeline-Container holds 3 smaller containers (TL-1,TL-2, etc). Everything is working fine between the parent container and the children container (meaning that all the TL-# containers are centered correctly with flex), however none of the items within the TL-# containers are centering.

I've tried "justify-content: center;" and it isn't affecting anything.

<div id="Timeline-Container">
        <div id="TL-1">
            <img src="Photos/2018 SB Photos/Lighted_Stadium_1.JPG">
            <p>Caption 1</p>
        </div>
        <div id="TL-2">
            <img src="Photos/2018 SB Photos/Lighted_Stadium_2.JPG">
            <p>Caption 2</p>
        </div>
        <div id="TL-3">
            <img src="Photos/2018 SB Photos/Lighted_Stadium_3.JPG">
            <p>Caption 3</p>
        </div>
    </div>


#Timeline-Container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

#Timeline-Container img {
    height: 35%;
    width: 35%;
    border: 5px solid #cccccc;
}

#TL-1 {
    /*Parent Flex Code*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items; center;
    /*Child Flex Code*/
    order: 1;
}

#TL-2 {
    /*Parent Flex Code*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items; center;
    /*Child Flex Code*/
    order: 2;
}

#TL-3 {
    /*Parent Flex Code*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items; center;
    /*Child Flex Code*/
    order: 3;
}

https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — A. Meshu, Aug 05 '19 at 17:15

score 1 · Answer 1 · answered Aug 05 '19 at 17:16

1

The justify-content rule only works on actual flex items. Flex items are elements whose immediate parent has display: flex; set. So if you want to center the content in your #TL-? items usinf flexbox rules, you will need to add display: flex to them as well.

My favorite flexbox resource, helps the concepts just make sense: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Aug 05 '19 at 17:16

BugsArePeopleToo

2,976
1
15
16

Right, however each of the `TL` (which contains the items) has display set to flex, but it's still not centering them. – Adam Aug 05 '19 at 17:26

score 1 · Accepted Answer · answered Aug 05 '19 at 17:41

1

You have a typo align-items; center; which has a semi-colon instead of align-items: center; which has a colon. Here is a code pen: https://codepen.io/the_legitTDM/pen/NQXPWv FYI: There is added margin for better viewing

answered Aug 05 '19 at 17:41

the_legitTDM

353
5
21

Flex items aren't centering within container?

2 Answers2