省略<p>标记时，段落中的文本仅在flexbox中垂直居中，其背后的原因是什么？

Question

查看以下Vuetify代码

<v-layout align-center justify-center row fill-height>
        <v-flex xs1>
          <v-icon color="primary">clear</v-icon>
        </v-flex>
        <v-flex xs8>
          <p>Text</p>
        </v-flex>
        <v-flex>
          <v-btn rounded color="primary">Do Something!</v-btn>
        </v-flex>
</v-layout>

（有关更多信息： https://codepen.io/anon/pen/xNvzbQ）

“文本”未垂直居中

但是在更换

时

<v-flex xs8>
          <p>Text</p>
</v-flex>

与

<v-flex xs8>
          Text
</v-flex>

突然是。

我也无法将其与周围的div中的align-items: center或align-content: center居中。

此行为背后的原因是什么？

Answer 1

实际上是将p标签居中。像其他人指出的那样。 p标签具有默认的底部边距，因此它看起来好像没有垂直居中。

请参见下图，其中橙色突出显示实际上是p标签的底部边距。 注意它实际上是如何垂直居中的。

因此，您可以通过以下任一方法解决此问题：

• 完全按照您说的删除p标签
• 改为使用div标签，该标签没有边距
• 只需将p标签的样式设置为具有margin-bottom: 0