将中心项目验证为 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 class 中是 text-center（所以没有 xs）：

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

Codepen

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

Answer 2

v-flex 没有显示 flex！在浏览器中检查 v-flex，你会发现它只是一个简单的块 div.

因此，您应该在 HTML 或 CSS 中使用 display: flex 覆盖它，以使其与 justify-content 一起使用。

Answer 3

<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>
  </v-card-actions>
</v-layout>

将中心项目验证为 v-flex

vuetify center items into v-flex

flexbox

vuejs2

vuetify.js