CSS Flex显示和段落居中

Question

我正在尝试使用display: flex代替float: left在div中将段落放在彼此旁边，然后我想将所有段落放在此div中}到屏幕中心（目前同时包含display: flex和float: left，它们位于屏幕左侧）

我正在尝试使用：

#div {display: flex; align-items: center;}

在我的CSS中，但它没有做到这一点。

有经验者可以给我一个如何做的小费吗？我一直在摆弄所有不同的属性 - 不管我做什么，文字都绑在左边。

https://jsfiddle.net/e7bft0eL/

Answer 1

只需添加 justifiy-content 属性

即可

  

当项目不使用主轴上的所有可用空间（水平）时，justify-content属性会对齐灵活容器的项目。

#test{
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: center;
}

jsfiddle