web-dev-qa-db-ja.com

Vue.js-VカードでのVuetifyレイアウトの問題

V-card-textタグ内にテキストを挿入すると、v-cardは centered すべてのビューポートで中央揃え

html

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
      <v-layout row wrap align-center justify-center>
        <v-flex xs6 offset xs-1 sm6 offset-sm1 md6 offset-md1>
            <v-card class="elevation-0">
              <v-card-title primary-title class="layout justify-center">
                <h1>TITLE</h1>
                </v-card-title>
              <v-card-text>
                ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus enim et justo eleifend pharetra. Nam consectetur, nulla in viverra mattis, ipsum libero faucibus odio, at eleifend mauris arcu non nibh. Aliquam congue augue sed sapien tristique, eget faucibus risus pulvinar. Nullam ut nunc felis.
              </v-card-text>
            </v-card>
         </v-flex>
      </v-layout>
    </v-parallax>
  </v-app>
</div>

css

.parallax {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

参照 codepen

ただし、v-card-textタグ内にボタンを挿入した場合、動作は同じではありません not centered 、中央揃えではない

html

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
      <v-layout row wrap align-center justify-center>
            <v-card class="elevation-0">
              <v-container>
                <v-layout column align-center justify-center >
              <v-card-title primary-title>
                <h1>TITLE</h1>
                </v-card-title>
              <v-card-text>
                <v-btn round class="primary" large href="#">SIGN UP</v-btn>
              </v-card-text>
                  </v-layout
                </v-container>
            </v-card>
      </v-layout>
    </v-parallax>
  </v-app>
</div>

css

.parallax {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

参照 codepen

すべてのビューポートでタイトル/ボタンを使用してvカードを自動中央揃えするにはどうすればよいですか？

フィードバックをありがとう.

ところで、Vuetifyレイアウトの例やtutsへの良いリンクはありますか???

cssvue.jsvuetify.js
3
user762579

解決しよう：私はディスプレイを削除する必要があります：flex; i .parallax CSS！

<div id="app">
  <v-app id="inspire">
    <v-parallax src="https://vuetifyjs.com/static/doc-images/parallax/material2.jpg" height="100vh">
<v-container grid-list-md text-xs-center>
      <v-layout row wrap>
        <v-flex xs6 offset-xs3>
          <v-card color="grey">
            <v-card-title primary-title class="layout justify-center"><h1>TITLE</h1></v-card-title>
            <v-card-text>
              <v-btn round class="primary" large href="#">SIGN UP
                </v-btn>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
      </v-parallax>
  </v-app>
</div>


.parallax {
  min-height: 100vh;
  align-items: center;
}
.card__text {
  font-size: 1.2em;
  padding-top: 0;
  padding-bottom: 7%;
}

この - output

参照 codepen

1
user762579

以下のようにv-cardまたはv-card-textのフレックスにボタンを追加すると、機能するはずです。

          <v-flex text-xs-center>
            <v-btn>Action</vbtn>                
          </v-flex>
1
nizantz