CODEWITHSUNDEEP
vuejs2vuetify.js
Denis Kokorin
Denis Kokorin

Reputation: 895

Position button at the center of the screen

I want to position Button (or any other component) at the center of the screen, not just line.

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

I'm aware of Jumbotron, but I actually want to position Form at the center and to add Toolbar and Footer later

Example at codepen

Upvotes: 0

Views: 10507

Answers (1)

Traxo
Traxo

Reputation: 19002

<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

Upvotes: 3

Related Questions