Question

我想以登录名，密码和登录块为中心。我想将不同的块居中，但我不知道如何在此级别上做。我尝试使用v-flex和v-layout，但没有通过。在代码中，我尝试使用v-layout和v-flex将第一个和第二个块居中，但结果不令人满意。

<template>
  <div>
    <v-app-bar
      color="teal accent-3"
      dark
    >

      <v-spacer></v-spacer>
        <v-flex xs="12"><p class="text-justify">Application de traitement des opérations</p></v-flex>
      <v-menu
        left
        bottom
      >
      
        <v-list>
          <v-list-item
            v-for="n in 5"
            :key="n"
            @click="() => {}"
          >
            <v-list-item-title>Option {{ n }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
   <div>
    <v-card
      class="mx-auto"
      height="100"
      max-width="200"
      outlined
      color="orange lighten-2"
    ></v-card>
    <v-card
      class="mt-n12 mx-auto"
      elevation="12"
      height="400"
      max-width="600"
    >
    <V-layout>
    <v-flex xs="12">
      <div class="text-xs-center">
        <v-col cols="12" sm="6" md="3">
          <v-text-field
            label="Solo"
            placeholder="Login"
            solo
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6" md="3">
          <v-text-field
            label="Solo"
            placeholder="Mot de passe"
            solo
          ></v-text-field>
        </v-col>
      </div>

        <el-button type="primary" @click="dialogVisible = true" >Connexion</el-button>

        <el-dialog
          title="Verification de Connexion"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>Connexion reussi</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Annuler la connexion</el-button>
            <el-button type="primary" @click="dialogVisible = false">Continuer</el-button>
          </span>
        </el-dialog>
      </v-flex >

    </V-layout>
    </v-card>
  </div>
  
  </div>
</template>

Answer 1

有很多方法可以做到这一点。您可以在显示行中使用flex，但这听起来像您尝试过的那样？如果是这样，您还可以尝试将其设置为显示：阻止，设置边距：自动。

将不同的方块放在v卡中

1 个答案: