CODEWITHSUNDEEP
flexboxvuetify.js
AbreQueVoy
AbreQueVoy

Reputation: 2316

Can't align container to the top of page and center it horizontally

This is my code:

<template>
  <main>
    <v-container grid-list-xs class="text-xs-center">
      <v-layout row>
        <v-flex xs2 v-for="n in 6" :key="n">
          <v-card tile class="pa-1" dark color="error">
            <v-card-text>
              Some mildly interesting thing #{{ n }}
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
      <v-layout row>
        <v-flex xs12 >
          <v-card tile class="pa-2" dark color="secondary">
            <v-card-text>
              Well, that's interesting too!
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
        <v-layout row>
          <v-flex xs2 v-for="n in 6" :key="n">
            <v-card tile class="pa-1" color="warning">
              <v-card-text>
                And something more here #{{ n }}.
              </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-layout>
      </v-container>
    </main>
</template>

When <main> is in use, I get the view with all flex items vertically aligned to the top, which is my goal, but they're not aligned to the center horizontally, there's a gap on the right-hand side (where the question mark shows in the 1st picture).

When I remove <main> from the code and the <v-container> becomes the parent element, the items go to the center, horizontally and vertically (2nd picture).

Again, I need them v-aligned to the top and centered horizontally. How to achieve this?

Layout with <main> engaged. Layout without <main> section

Upvotes: 1

Views: 2961

Answers (3)

Charles G
Charles G

Reputation: 1381

I would say:

<v-container fill-height justify-start>

Upvotes: 0

Michelle Mitchell
Michelle Mitchell

Reputation: 46

replace your main tag with a v-content tag. I had this same issue. If you are using Router wrap router-view in a v-content tag rather than a main tag. You can find examples in Vuetifys' docs Vuetify

Upvotes: 3

Hines Bourne
Hines Bourne

Reputation: 609

I think you just need fill-height on the v-container and possibly a fluid as well.

<v-container fill-height grid-list-xs class="text-xs-center">

Upvotes: 0

Related Questions