在Vuetify上将内容垂直居中

Mandy古一2020-03-16

有没有办法在Vuetify中将内容垂直居中？

使用text-xs-centerhelper类时，内容仅在水平方向居中：

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
     <v-flex xs12>
       Hello
     </v-flex>
  </v-layout>

从API出发，我测试了其他一些帮助器类，例如，align-content-center但没有达到结果。

神乐小宇宙Gil2020/03/16 10:08:28

这是使用Vuetify grid系统的另一种方法，网址为Vuetify 2.x：https : //vuetifyjs.com/en/components/grids

<v-container>
    <v-row justify="center">
        Hello I am center to vertically using "grid".
    </v-row>
</v-container>

Mandy古一2020/03/16 10:08:28

在Vuetify 2.x中，v-layout和v-flex分别由v-row和v-col代替。要使内容在垂直和水平方向上居中，我们必须指示v行组件执行此操作：

<v-container fill-height>
    <v-row justify="center" align="center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
    </v-row>
</v-container>

align =“ center”将内容在行内垂直居中
justify =“ center”将内容在行内水平居中
fill-height将使整个内容相对于page居中。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer