html - CSS Flex 显示和段落居中

Question

我尝试使用 display: flex 而不是 float: left 将段落在 div 中彼此相邻放置，然后我想将此 div 中的所有段落放置到屏幕中心(目前使用 display: flex 和 float: left 它们是位于屏幕左侧)

我正在尝试使用:

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

在我的 css 中，但它没有起作用。

更有经验的人可以给我一些如何做的提示吗？我一直在摆弄所有不同的属性 - 无论我做什么，文本都会绑定(bind)到左侧。

https://jsfiddle.net/e7bft0eL/

Answer 1

只需添加justifiy-content属性

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

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

jsfiddle