如何在Vuetify和垂直居中图像中创建等高的v-col?

地亚哥

我似乎无法使两列高度相同的图像居中于Vuetify。我已经尝试了一切,但不知道自己在做什么错。我希望这张图片能说明我想要实现的目标。

在此处输入图片说明

下面是一个代码段,但是看起来不像我在本地看到的那样。我不认为这真的很重要,因为cols的高度也不一样。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
data: () => ({
      showPassword:false,
      valid: false,
      wachtwoord:'',
      wachtwoordRules: [
        v => !!v || 'Wachtwoord is vereist',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is vereist',
        v => /.+@.+\..+/.test(v) || 'Voer een geldig e-mailadres in',
      ]
    }),
    methods: {
      validate () {
        this.$refs.form.validate()
      },
    },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.2/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>


<div id="app">
  <v-app style="
    background-color: #011c40;
    background-image: linear-gradient(180deg,  #011c40 50%,  rgb(26, 65, 115) 100%);
    background-size: cover;
  ">
    <v-main>
       <v-container fill-height>
    <v-row justify="center"
           align="center"
           no-gutters
            class="grey">
      <v-col cols="4" class="grey lighten-5">
       <v-img src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
      </v-col>
      <v-col align="center" cols="4"  class="grey lighten-5 pa-10">
        <v-img class="mb-7" src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" width="200px"></v-img>
          <v-form  ref="form"
                   v-model="valid"
          >
            <v-text-field
                    v-model="email"
                    :rules="emailRules"
                    label="E-mail"
                    required/>
            <v-text-field
                    :type="showPassword ? 'text' : 'password'"
                    label="Wachtwoord"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    @click:append="showPassword = !showPassword"
                    v-model="wachtwoord"
                    :rules="wachtwoordRules"
                    required
            />
            <v-checkbox class="mt-0" dense label="Onthoud mij"></v-checkbox>
          </v-form>
        <v-btn height="50px" :disabled="!valid" tile ripple depressed block color="secondary" @click="validate">Inloggen</v-btn>
        <div class="pt-3">
          <v-divider></v-divider>
          <div class="d-block caption text-center mt-3"><a href="">Wachtwoord vergeten?</a></div>
          <div class="d-block caption text-center">Nog geen account? Meld u <a href="">hier</a> aan.</div>
        </div>
      </v-col>
    </v-row>
  </v-container>
    </v-main>
  </v-app>
</div>

大卫·高

首先,您需要align="center"从行中删除然后将contain属性添加v-img标记并将列设置为disply:flex例:

    <v-col cols="4" class="grey d-flex lighten-5">
       <v-img contain src="http://www.dpereira.nl/Er/img/banner.png"></v-img>
     </v-col>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章