Css Vue.js-使用v-card解决Vuetify布局问题

在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>

看

但是，如果我在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>

看

如何在所有视口中使用标题/按钮自动居中v型卡

谢谢你的反馈

---

顺便说一句，有没有关于vuetify布局示例/tut的好链接？

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

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

行动

解决：我应该移除显示器：flex；我看到了。视差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%;
}

标题
注册
.视差{
最小高度：100vh；
对齐项目：居中；
}
.card\u文本{
字体大小：1.2米；
填充顶部：0；
垫底：7%；
}

这个

---

请参见

感谢您的反馈。。。它将按钮居中放置在v-card内，但未将v-card居中放置在视差容器内…如果发现错误，我应移除显示器：flex；在CSS中，用于.parallax。

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

<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%;
}