Vue.js - v-card 的 Vuetify 布局问题答案

【问题标题】：Vue.js - Vuetify layout issue with v-cardVue.js - v-card 的 Vuetify 布局问题
【发布时间】：2018-12-01 02:10:37
【问题描述】：

当我在 v-card-text 标签内插入文本时，v-card 在所有视口中为居中

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 标签内插入一个按钮，那么行为也不相同，，不居中

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-card 居中？

感谢反馈..

顺便说一句，有没有很好的链接到 vuetify 布局示例 / tuts ???

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

在 v-card 或 v-card-text 的 flex 中添加按钮，如下所示，它应该可以工作：

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

【讨论】：

感谢反馈...它使按钮在 v-card 内居中，但它不会在视差容器内居中 v-card ...
发现错误，我应该删除 display: flex;在 .parallax 的 CSS 中。

【解决方案2】：

已解决：我应该删除显示：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%;
}

这个

见codepen

【讨论】：