vuetify 中心项目到 v-flex [英] vuetify center items into v-flex

问题描述

我正在尝试将 ​​ 居中到 .由于 是一个 flexbox div，所以我使用了转换成

的 justify-center

justify-content: center

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

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

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

完整代码如下:

 <v-card-text ><v-text-field label="Email"></v-text-field><v-text-field label="密码"></v-text-field></v-card-text><v-card-actions><v-布局行><v-flex justify-center><v-btn 初级>注册</v-btn></v-flex></v-layout></v-card-actions></v-card>

解决方案

wrap button inside

<v-btn 初级>注册</v-btn>

Dev 在他的例子中使用了它.

<小时>

对于 v-card-actions 中的居中按钮，我们可以添加 class="justify-center"(注意 v2 类中是 text-center(所以没有 xs):

<v-btn>注册</v-btn></v-card-actions>

Codepen

<小时>

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

I'm trying to center a <v-btn> into a <v-flex>. Since <v-flex> is a flexbox div, I use justify-center that is transformed into

justify-content: center

Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem.

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

I want to signup the button to be centered inside the div (v-flex).

Here is the full code:

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

解决方案

wrap button inside <div class="text-xs-center">

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

Dev uses it in his examples.

---

For centering buttons in v-card-actions we can add class="justify-center" (note in v2 class is text-center (so without xs):

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

Codepen

---

For more examples with regards to centering see here

这篇关于vuetify 中心项目到 v-flex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！