在Vuetify上垂直居中放置内容 [英] Center content vertically on Vuetify

问题描述

是否可以在Vuetify中将内容垂直居中?

Is there a way to center content vertically in Vuetify?

使用 text-xs-center 帮助器类，内容仅在水平方向居中:

With the text-xs-center helper class, the content gets centered horizontally only:

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

在 API 中，我测试了其他一些帮助类，例如 align-content-center ，但没有达到结果.

From the API, I tested some other helper classes such as align-content-center but did not achieve the result.

推荐答案

更新为新的vuetify版本

在 v.2.xx 中，我们可以使用 对齐 和 justify .我们有以下用于设置水平和垂直对齐方式的选项.

Update for new vuetify version

In v.2.x.x , we can use align and justify. We have below options for setup the horizontal and vertical alignment.

1. PROPS align :开始"，中心"，结束"，基线"，拉伸"

PRPS justify :开始"，中心"，结束"，周围空间"，中间间隔"

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

有关更多详细信息，请参阅此 vuetify网格系统，而您可以通过运行 codepen 演示进行检查.

For more details please refer this vuetify grid-system and you could check here with working codepen demo.

对于 align-center href ="https://vuetifyjs.com/en/layout/pre-defined#introduction" rel ="noreferrer"> 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>

这篇关于在Vuetify上垂直居中放置内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！