在Vuetify上将内容垂直居中

Vue.js

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但没有达到结果。

第1667篇《在Vuetify上将内容垂直居中》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
神乐小宇宙Gil 2020.03.16

这是使用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

在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居中。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android