使用flex </p>在<p>中居中文本

时间:2014-07-15 22:29:37

标签: html css3

请解释我

p {display: flex; justify-content: center}

当p中有太多(多于一个)文本行时,为什么justify-content:center不起作用?

1 个答案:

答案 0 :(得分:0)

Text-alignjustify-content不是文字对齐的替代属性。它们是具有不同目标的不同属性。 text-align用于指定块框中文本和内联内容的对齐方式,justify-content用于证明弹性框中的flex项目。

我将 an example 放在一起,以演示justify-contenttext-align如何一起玩。

参考规格:

  

text-align: left | right | center | justify | inherit

     

此属性描述块容器的内联级内容是如何对齐的

从灵活的盒子模型布局:

  

display: flex|inline-flex;

     

此值使元素生成块级flex 容器框。

     

justify-content: flex-start | flex-end | center | space-between | space-around **

     

justify-content属性沿着flex容器的当前行的主轴对齐flex项目

这些是一些推荐的资源,可以阅读灵活的盒子模型布局: