Vuetify에서 수직으로 컨텐츠 중앙 집중

Vuetify에서 수직으로 컨텐츠 중앙 집중

Vuetify에서 컨텐츠를 수직으로 중앙에 배치할 수 있는 방법이 있는가?

With thetext-xs-center도우미 클래스, 콘텐츠가 수평으로 중앙에 배치되는 경우:

<v-container grid-list-md text-xs-center>
  <v-layout row wrap>
     <v-flex xs12>
       Hello
     </v-flex>
  </v-layout>

API에서 나는 다음과 같은 다른 도우미 클래스를 테스트했다.align-content-center그러나 그 결과를 얻지 못했다.

새 vuetify 버전 업데이트

v.2.x.x에서는 및 를 사용할 수 있다.수평 및 수직 정렬을 설정할 수 있는 옵션은 다음과 같다.

1. PROPES:'start','center','end','baseline','stretch'

2. PRPS:'start','center','end','space-around','space-between'

<v-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>

자세한 내용은 이 시각적 그리드 시스템을 참조하십시오. 여기서 작업 코드펜 데모를 확인하십시오.

---

오리지널 해답

에 쓸 수도 있고fill-height컨테이너용의

v1.x.x를 사용한 데모

new Vue({
  el: '#app' 
})

.bg{
    background: gray;
    color: #fff;
    font-size: 18px;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
      <v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
            Hello I am center to vertically using "align-center".
          </v-flex>
        </v-layout>
      </v-container>
  </v-app>
</div>

Vuetify 2.x에서는 v-layout과 v-flex가 각각 v-row와 v-col로 대체된다.컨텐츠를 수직 및 수평으로 중앙 집중화하려면 v-row 구성 요소에서 다음 작업을 수행하도록 지시해야 한다.

<v-container fill-height>
    <v-row justify="center" align="center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
    </v-row>
</v-container>

• align="중앙"은 내용을 행 내부로 수직으로 중앙에 배치한다.
• pritty="중앙"은 내용을 행 안쪽으로 수평으로 중앙에 배치한다.
• 페이지와 비교하여 전체 내용을 중심으로 채우기.

Vuetify를 사용한 다른 접근 방식grid에서 이용 가능한 시스템Vuetify 2.x: https://vuetifyjs.com/en/components/grids

<v-container>
    <v-row align="center">
        Hello I am center to vertically using "grid".
    </v-row>
</v-container>

가장 짧은 솔루션을 제안하는 사람이 아무도 없다는 사실에 여전히 놀랐다.align-center justify-center콘텐츠의 중심을 수직 및 수평으로 맞춘다.아래의 CodeSandbox 및 코드를 확인하십시오.

<v-container fluid fill-height>
  <v-layout align-center justify-center>
    <v-flex>
      <!-- Some HTML elements... -->
    </v-flex>
  </v-layout>
</v-container>

<v-container>다음이 바로 뒤에 있어야 한다.<div>그 사이에 수직 정렬은 작동하지 않을 것이다.

<template>
  <v-container fill-height>
      <v-row class="justify-center align-center">
        <v-col cols="12" sm="4">
            Centered both vertically and horizontally
        </v-col>
      </v-row>
  </v-container>
</template>

FOR CARD: 간결하고 v2+로 작동함.이렇게 하면 컨텐츠가 수평 및 수직으로 중앙에 위치하는 v-card를 얻을 수 있다.

<v-card class="d-flex align-center justify-center"  min-height="250">
    Content here...
</v-card>

코데펜

나를 위해.align="center"중심을 잡기에 충분했다.FOO수직:

<v-row align="center">
  <v-col>FOO</v-col>
</row>

행 또는 열을 사용하지 않는 경우...다음과 같이 시력 검사 앱의 주요 콘텐츠를 중앙에 배치할 수 있다.

<v-app>
    <v-main>
        <v-container fluid fill-height>
            <v-layout class="align-center justify-center">
                <router-view></router-view>
            </v-layout>
        </v-container>
    </v-main>
</v-app>

내 예제에서 첫 번째 v-for는 상위 요소의 모든 간격을 차지하며, 채우기 높이는 사용 가능한 높이를 모두 차지하게 된다.이런 식으로 우리는 가능한 한 제2의 v-row를 사용해 위치를 잡을 수 있다.

<v-row class="fill-height">
  <v-row align="center" justify="center">
    try TOO
    align="start" || align="center" ||  align="end" <br>
    justify="start" || justify="center" || justify="end"
  </v-row>
</v-row>

여기에서 그리드 문서를 확인하십시오. https://vuetifyjs.com/en/components/grids/#1911

참조URL: https://stackoverflow.com/questions/52343526/center-content-vertically-on-vuetify