Question

当我在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卡自动居中？

感谢您的反馈..

btw，是否有任何很好的链接可以对布局示例/ tut进行可视化？

Answer 1

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

[0,256)

Answer 2

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

此CMake: Of what use is find_package() if you need to specify CMAKE_MODULE_PATH anyway?

请参见

Vue.js-V卡的Vuetify布局问题

2 个答案: