3

When I insert a text inside a v-card-text tag ,the v-card is centered centered in all viewports

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

see codepen

HOWEVER , if I insert a button inside the v-card-text tags, then the behavior is nor the same, not centered , 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%;
}

see codepen

How can I auto center the v-card with the title / button in all viewports ?

thanks for feedback ..

btw , is there any good link to vuetify layout examples / tuts ???

2 Answers2

4

Add the button in a flex in the v-card or v-card-text as below and it should work:

          <v-flex text-xs-center>
            <v-btn>Action</vbtn>                
          </v-flex>
nizantz
  • 1,561
  • 1
  • 13
  • 17
  • thanks for feedback... it centers the button inside the v-card , but it does not center the v-card inside the parallax container ... –  Jun 22 '18 at 05:08
  • found the error , I should remove the display: flex; in the CSS for .parallax . –  Jun 22 '18 at 05:42
2

SOLVED : I should remove the display: flex; i the .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%;
}

this output

see codepen