Question

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

我尝试过“ 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;的元素。因此，如果您想使用弹性框规则将#TL-?项中的内容居中，则还需要向其中添加display: flex。

我最喜欢的flexbox资源可以帮助使这些概念更有意义：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您有一个带有分号的错字ServerHttpSecurity而不是带有冒号的align-items; center;。这是一支密码笔：https://codepen.io/the_legitTDM/pen/NQXPWv 仅供参考：增加了边距，可以更好地观看

弹性物品不在容器内居中吗？

2 个答案: