【问题标题】:Center content vertically on Vuetify在 Vuetify 上垂直居中内容
【发布时间】:2019-02-19 22:46:30
【问题描述】:

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

使用 text-xs-center 辅助类,内容仅水平居中:

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

API,我测试了一些其他的帮助类如align-content-center,但没有达到结果。

【问题讨论】:

    标签: javascript css vue.js vuetify.js


    【解决方案1】:

    对于卡片:简洁且适用于 v2+。这将为您提供一个水平和垂直居中内容的 v-card:

    <v-card class="d-flex align-center justify-center"  min-height="250">
        Content here...
    </v-card>
    

    codepen

    【讨论】:

      【解决方案2】:

      在我的示例中,第一个 v-for 将占用所有父元素的间距,而 fill-heigh 将占用所有可用高度。这样我们就可以使用第二个 v-row 来尽可能地定位。

      <v-row class="fill-height">
        <v-row align="center" justify="center">
          try TOO
          align="start" || align="center" ||  align="end" <br>
          justify="start" || justify="center" || justify="end"
        </v-row>
      </v-row>
      

      请在此处查看网格文档: https://vuetifyjs.com/en/components/grids/#justify

      【讨论】:

        【解决方案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>
        

        【讨论】:

          【解决方案4】:

          对我来说,align="center" 足以垂直居中 FOO

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

          【讨论】:

            【解决方案5】:

            &lt;v-container&gt; 必须紧跟在&lt;template&gt; 之后,如果中间有&lt;div&gt;,垂直对齐将不起作用。

            <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>
            

            【讨论】:

              【解决方案6】:

              仍然感到惊讶的是,没有人提出使用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>
              

              【讨论】:

                【解决方案7】:

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

                【讨论】:

                • justify 用于水平对齐,align 用于垂直对齐。所以你应该有align="center" 而不是justify="center"
                【解决方案8】:

                在 Vuetify 2.x 中,v-layoutv-flex 被替换为 v-rowv-col 分别。要使内容在垂直和水平方向居中,我们必须指示 v-row 组件来做到这一点:

                <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 将使整个内容居中与页面相比

                【讨论】:

                  【解决方案9】:

                  更新 vuetify 新版本

                  v.2.x.x 中,我们可以使用alignjustify。我们有以下设置水平和垂直对齐的选项。

                  1. 道具 align : 'start','center','end','baseline','stretch'

                  2. PRPS justify : '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>

                  【讨论】:

                  • 我只想添加一个注释:align-center center 只有在为容器设置了fill-height 时才有效。谢谢
                  • 值得一提的是,为了让它工作,你必须直接使用&lt;v-app&gt; 的孩子。如果您有一些&lt;divs&gt;s 作为v-footer|v-content 的根,这将失败(例如,如果您使用布局将组件重用为页面,并且您的&lt;template&gt; 需要根&lt;div&gt;)。跨度>
                  • 注意这里使用的是旧的网格系统,新的使用v-rowv-col。请参阅 Billal 的回答:stackoverflow.com/a/59089655/3315164
                  • @nelson6e65 你是怎么解决这个问题的?我无法居中我的 v-flex :(
                  • fill-height 对我来说是缺失的部分,它不在文档中:vuetifyjs.com/en/api/v-container。点赞,加油!
                  猜你喜欢
                  • 1970-01-01
                  • 2014-11-28
                  • 1970-01-01
                  • 2016-09-10
                  • 2017-08-16
                  • 2015-03-01
                  • 2017-12-13
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多