CODEWITHSUNDEEP
cssvue.jssassvue-componentvuetify.js
Raúl Peñate
Raúl Peñate

Reputation: 609

How to justify-content: center with Vuetify3

I've my component at the top of the page but I want in in the middle. component at the top

Like this: component in the middle

This is my code:

<template>
  <v-container class="align-center" fill-height fluid>
    <v-row class="d-flex justify-center mb-6">
      <h1>Contador <v-icon>mdi-clock-outline</v-icon></h1>
    </v-row>
    <v-row class="d-flex justify-center mb-6">
      <h2>{{ count }}</h2>
    </v-row>
    <v-row class="d-flex justify-center mb-6">
      <v-btn @click="increment" class="mx-5" icon><v-icon>mdi-plus</v-icon></v-btn>
      <v-btn @click="decrement" class="mx-5" icon><v-icon>mdi-minus</v-icon></v-btn>
    </v-row>
  </v-container>
</template>

How can I put everything in the middle? using vuetify3 if it's possible, and thanks in advance.

Upvotes: 1

Views: 993

Answers (2)

Ra&#250;l Pe&#241;ate
Ra&#250;l Pe&#241;ate

Reputation: 609

Apparently fill-height doesn't exist in Vuetify 3, it's class="h-100"

Source: https://github.com/vuetifyjs/vuetify/issues/15733#issuecomment-1236087299

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Add d-flex class names to the container component and wrap v-row's with v-col component:

 <v-container class="align-center d-flex" fill-height fluid>
      <v-col>
        <v-row class="d-flex justify-center mb-6">
          <h1>Contador <v-icon>mdi-clock-outline</v-icon>
          </h1>
        </v-row>
        <v-row class="d-flex justify-center mb-6">
          <h2>{{ count }}</h2>
        </v-row>
        <v-row class="d-flex justify-center mb-6">
          <v-btn class="mx-5" icon>
            <v-icon>mdi-plus</v-icon>
          </v-btn>
          <v-btn class="mx-5" icon>
            <v-icon>mdi-minus</v-icon>
          </v-btn>
        </v-row>
      </v-col>
    </v-container>

demo

Upvotes: 2

Related Questions