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리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

동적 높이 고정 요소를 수직으로 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

정렬 된 요인의 수준을 높이거나 낮추는 방법은 무엇입니까? (다음 단계와 동일한 요소를 만드십시오)

분류에서Dev

정렬 된 요인의 수준을 높이거나 낮추는 방법은 무엇입니까? (다음 단계와 동일한 요소를 만드십시오)

분류에서Dev

이미지와 같은 줄에있는 양식을 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

높이가 자동 인 동안 수직 중심을 수행하는 방법은 무엇입니까?

분류에서Dev

내가 추가 한 이미지와 같은 Android에서 모양을 만드는 방법은 무엇입니까?

분류에서Dev

이미지를 수직으로 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

함수 내에서 jquery ID 선택을 이와 동일하게 만드는 방법은 무엇입니까?

분류에서Dev

GTK4의 중앙에 창을 만드는 방법은 무엇입니까?

분류에서Dev

높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?

분류에서Dev

Boostrap 3 : 레이아웃 열의 내용을 동일한 높이로 만드는 방법은 무엇입니까?

분류에서Dev

div 내에서 수직 자동 스크롤 이미지를 만드는 방법은 무엇입니까?

분류에서Dev

두 수식이 Excel에서 동일한 셀을 참조하도록 만드는 방법은 무엇입니까?

분류에서Dev

cmd 인수에서 파일 이름을 가져와 복사본을 만드는 방법은 무엇입니까?

분류에서Dev

명령 줄 인수와 같은 이름의 파일을 만드는 방법은 무엇입니까?

분류에서Dev

div가 커서를 따르지만 창 중앙을 향해 Xpx만큼 이동하게 만드는 방법은 무엇입니까?

분류에서Dev

중앙 요소의 높이가 창 높이보다 길 때 수직 중심을 비활성화하는 방법은 무엇입니까? (자바 스크립트 제외)

분류에서Dev

CSS에서 페이지 중앙에 이미지를 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

img로 3 div를 중앙에 배치 하고이 이미지 (anexo)와 같이 다른 div에 레이블을 지정하는 방법은 무엇입니까?

분류에서Dev

이미지가있는 Outlook 서명을 수동으로 만드는 방법은 무엇입니까?

분류에서Dev

동일한 모양의 두 개 이상의 중첩 목록에서 작동하는 Python 함수를 만드는 방법은 무엇입니까?

분류에서Dev

jquery를 사용하여 슬라이더의 이미지를 클릭 할 때 중앙에서 이미지를 이동하는 방법은 무엇입니까?

분류에서Dev

Bootstrap을 사용하여 고정 높이로 div에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

이미지와 함께 HTML에서 사이드 단락을 만드는 방법은 무엇입니까?

분류에서Dev

이미지 중앙에있는 타원과 수직선 사이의 각도를 찾는 방법은 무엇입니까?

분류에서Dev

동일한 높이의 내부 div와 float : left를 동시에 달성하는 방법은 무엇입니까?

분류에서Dev

축이 중앙에 정렬 될 때 그리드 선을 만드는 방법은 무엇입니까?

분류에서Dev

TextView에서 텍스트와 아이콘을 동시에 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

수직 규칙을 새 레이어와 동일한 x 축으로 추가하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    동적 높이 고정 요소를 수직으로 중앙에 배치하는 방법은 무엇입니까?

  2. 2

    정렬 된 요인의 수준을 높이거나 낮추는 방법은 무엇입니까? (다음 단계와 동일한 요소를 만드십시오)

  3. 3

    정렬 된 요인의 수준을 높이거나 낮추는 방법은 무엇입니까? (다음 단계와 동일한 요소를 만드십시오)

  4. 4

    이미지와 같은 줄에있는 양식을 중앙에 배치하는 방법은 무엇입니까?

  5. 5

    높이가 자동 인 동안 수직 중심을 수행하는 방법은 무엇입니까?

  6. 6

    내가 추가 한 이미지와 같은 Android에서 모양을 만드는 방법은 무엇입니까?

  7. 7

    이미지를 수직으로 중앙에 배치하는 방법은 무엇입니까?

  8. 8

    함수 내에서 jquery ID 선택을 이와 동일하게 만드는 방법은 무엇입니까?

  9. 9

    GTK4의 중앙에 창을 만드는 방법은 무엇입니까?

  10. 10

    높이와 너비가 고정되고 텍스트가 중앙에있는 앵커 버튼을 만드는 방법은 무엇입니까?

  11. 11

    Boostrap 3 : 레이아웃 열의 내용을 동일한 높이로 만드는 방법은 무엇입니까?

  12. 12

    div 내에서 수직 자동 스크롤 이미지를 만드는 방법은 무엇입니까?

  13. 13

    두 수식이 Excel에서 동일한 셀을 참조하도록 만드는 방법은 무엇입니까?

  14. 14

    cmd 인수에서 파일 이름을 가져와 복사본을 만드는 방법은 무엇입니까?

  15. 15

    명령 줄 인수와 같은 이름의 파일을 만드는 방법은 무엇입니까?

  16. 16

    div가 커서를 따르지만 창 중앙을 향해 Xpx만큼 이동하게 만드는 방법은 무엇입니까?

  17. 17

    중앙 요소의 높이가 창 높이보다 길 때 수직 중심을 비활성화하는 방법은 무엇입니까? (자바 스크립트 제외)

  18. 18

    CSS에서 페이지 중앙에 이미지를 중앙에 배치하는 방법은 무엇입니까?

  19. 19

    img로 3 div를 중앙에 배치 하고이 이미지 (anexo)와 같이 다른 div에 레이블을 지정하는 방법은 무엇입니까?

  20. 20

    이미지가있는 Outlook 서명을 수동으로 만드는 방법은 무엇입니까?

  21. 21

    동일한 모양의 두 개 이상의 중첩 목록에서 작동하는 Python 함수를 만드는 방법은 무엇입니까?

  22. 22

    jquery를 사용하여 슬라이더의 이미지를 클릭 할 때 중앙에서 이미지를 이동하는 방법은 무엇입니까?

  23. 23

    Bootstrap을 사용하여 고정 높이로 div에서 이미지를 중앙에 배치하는 방법은 무엇입니까?

  24. 24

    이미지와 함께 HTML에서 사이드 단락을 만드는 방법은 무엇입니까?

  25. 25

    이미지 중앙에있는 타원과 수직선 사이의 각도를 찾는 방법은 무엇입니까?

  26. 26

    동일한 높이의 내부 div와 float : left를 동시에 달성하는 방법은 무엇입니까?

  27. 27

    축이 중앙에 정렬 될 때 그리드 선을 만드는 방법은 무엇입니까?

  28. 28

    TextView에서 텍스트와 아이콘을 동시에 중앙에 배치하는 방법은 무엇입니까?

  29. 29

    수직 규칙을 새 레이어와 동일한 x 축으로 추가하는 방법은 무엇입니까?

뜨겁다태그

보관