将中心项目视为v-flex

Question

我试图把一个中心<v-btn>变成一个<v-flex>.由于<v-flex>是一个flexbox div,我使用justify-center它转换成

justify-content: center

由于我的方向是水平的,我的按钮应该居中对齐,但事实并非如此.这是重现我的问题的codepen.

https://codepen.io/anon/pen/ZXLzex

我想注册按钮在div(v-flex)内居中.

这是完整的代码:

 <v-card>
    <v-card-text >
          <v-text-field label="Email"></v-text-field>
          <v-text-field label="Password"></v-text-field>
    </v-card-text>

    <v-card-actions>
        <v-layout row>
          <v-flex justify-center>
            <v-btn primary>
              Signup
            </v-btn>
          </v-flex>
        </v-layout>
    </v-card-actions>
  </v-card>

Answer 1

包裹按钮里面 <div class="text-xs-center">

<div class="text-xs-center">
  <v-btn primary>
    Signup
  </v-btn>
</div>

Dev在他的例子中使用它.

对于居中按钮v-card-actions我们可以添加class="justify-center":

<v-card-actions class="justify-center">
  <v-btn>
    Signup
  </v-btn>
</v-card-actions>

Codepen

有关居中的更多示例,请参见此处

Answer 2

<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>`enter code here`
  </v-card-actions>
</v-layout>