代码之家 › 专栏 › 技术社区 › Billal Begueradj

在Vuetify上垂直居中显示内容

vuetify.js css javascript

Billal Begueradj · 技术社区 · 6 年前

有没有办法在Vuetify中垂直地集中内容?

与 text-xs-center helper类,内容仅水平居中:

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

从 API align-content-center 但没有达到预期效果。

1 回复 | 直到 5 年前

128

Community CDub 4 年前

更新新vuetify版本

在 align 和 justify . 我们有以下设置水平和垂直对齐的选项。

道具 排列 'start','center','end','baseline','stretch'
PRPS公司 'start','center','end','space-around','space-between'

<v-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>

更多详情请参考 vuetify grid-system 你可以在这里查一下 codepen 演示。

你可以用 align-center layout 和 fill-height

使用v1.x.x演示

new Vue({
  el: '#app' 
})

.bg{
    background: gray;
    color: #fff;
    font-size: 18px;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
      <v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
            Hello I am center to vertically using "align-center".
          </v-flex>
        </v-layout>
      </v-container>
  </v-app>
</div>

Marcello B. 4 年前

在Vuetify 2.x中, v型布局 和 v-flex公司 替换为 v-行 和 v柱分别。要使内容垂直和水平居中,我们必须指示 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=“居中” 将内容垂直居中 在一排里面
在一排里面
填充高度 将以整个内容为中心 与页面相比 .

Marcello B. 4 年前

下面是使用Vuetify的另一种方法 grid 系统在中可用 Vuetify 2.x : https://vuetifyjs.com/en/components/grids

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

Marcello B. 4 年前

仍然惊讶于没有人提出最短的解决方案 align-center justify-center 使内容垂直和水平居中。检查 this CodeSandbox

<v-container fluid fill-height>
  <v-layout align-center justify-center>
    <v-flex>
      <!-- Some HTML elements... -->
    </v-flex>
  </v-layout>
</v-container>

Marcello B. 4 年前

<v-container> 必须是 刚好在…之后 <template> <div> 在两者之间,垂直对齐将不起作用。

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

DevonDahon 4 年前

为了我, align="center" 足够集中注意力了 FOO 垂直地:

<v-row align="center">
  <v-col>FOO</v-col>
</row>

Greg 3 年前

不使用行或列。。。您可以将vuetify应用程序的主要内容集中在以下位置:

<v-app>
    <v-main>
        <v-container fluid fill-height>
            <v-layout class="align-center justify-center">
                <router-view></router-view>
            </v-layout>
        </v-container>
    </v-main>
</v-app>