flexbox - vuetify 中心项目到 v-flex

Question

我正在尝试将 <v-btn> 居中成<v-flex> .自 <v-flex>是一个 flexbox div，我使用 justify-center转化为

justify-content: center

由于我的方向是水平的，我的按钮应该居中对齐，但事实并非如此。这是重现我的问题的代码笔。

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" (注意 v2 类是 text-center (所以没有 xs ):

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

Codepen

有关居中的更多示例，请参阅 here