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

Question

我正在尝试将弹性项目居中，但是我一定做错了什么，因为它不起作用。基本轮廓是Timeline-Container可容纳3个较小的容器(TL-1，TL-2等)。父容器和子容器之间的一切正常(这意味着所有TL-#容器都使用 flex 正确居中)，但是TL-#容器中的所有项目都没有居中。

我尝试过"证明内容：中心"，它不会影响任何事情。

<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

您有一个拼写错误align-items; center;它有一个分号，而不是align-items: center;有一个冒号。下面是一个代码笔：https://codepen.io/the_legitTDM/pen/NQXPWv 仅供参考：增加了余量以获得更好的观看效果

Answer 2

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

我最喜欢的弹性框资源，帮助概念变得有意义：https://css-tricks.com/snippets/css/a-guide-to-flexbox/