位置按钮位于屏幕中央

时间:2018-06-03 13:53:08

标签: vuejs2 vuetify.js

我想将Button(或任何其他组件)放在屏幕的中心,而不仅仅是行。

<div id="app">
  <v-app id="inspire"  fill-height fluid>
    <v-container fill-height fluid>
      <v-layout  fill-height fluid>
        <v-flex  fill-height fluid align-center>
          <v-btn>Click me</v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

我知道Jumbotron,但我实际上想要将Form定位在中心并稍后添加工具栏和页脚

Example at codepen

1 个答案:

答案 0 :(得分:1)

<v-content>
    <!--- pick-up screen height so we can center vertically -->
    <v-container fill-height>
        <!--- vertical and horizontal alignment -->
        <v-layout align-center justify-center>
            <v-flex xs6>
            <!--- v-flex is centered now, but we need to center button inside v-flex -->
                <div class="text-xs-center">
                    <v-btn>Click me</v-btn>
                </div>
            </v-flex>
        </v-layout>
    </v-container>
</v-content>

https://codepen.io/anon/pen/bKEEex

相关问题