弹性项目不在容器内居中？

Question

我正在尝试将 flex 项目居中，但是我一定是做错了什么，因为它不起作用。基本轮廓是 Timeline-Container 包含 3 个较小的容器（TL-1、TL-2 等）。父容器和子容器之间一切正常（意味着所有 TL-# 容器都通过 flex 正确居中），但是 TL-# 容器中的 none 项目居中。

我试过 "justify-content: center;" 没有任何影响。

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

Answer 1

justify-content 规则仅适用于实际弹性项目。弹性项目是其直接父元素已设置 display: flex; 的元素。因此，如果您想使用 flexbox 规则将 #TL-? 项目中的内容居中，您还需要向它们添加 display: flex。

我最喜欢的 flexbox 资源，有助于理解概念：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您有一个错字 align-items; center;，它有一个分号而不是 align-items: center;，它有一个冒号。下面是码笔：https://codepen.io/the_legitTDM/pen/NQXPWv 仅供参考：为了更好地观看还有额外的保证金

弹性项目不在容器内居中？

Flex items aren't centering within container?

css

centering

flexbox