问题描述
我正在尝试将<v-btn>
置于<v-flex>
的中心.由于<v-flex>
是flexbox div,因此我使用justify-center
转换为
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
由于我的方向是水平的,所以我的按钮应该居中对齐,但是不是.这是重现我的问题的Codepen.
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
我想注册按钮以使其位于div(v-flex)的中心.
I want to signup the button to be centered inside the 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>
推荐答案
<div class="text-xs-center">
<div class="text-xs-center">
<v-btn primary>
Signup
</v-btn>
</div>
Dev在他的示例中使用了它.
Dev uses it in his examples.
对于v-card-actions
中的居中按钮,我们可以添加class="justify-center"
(注意v2类中的是text-center
(因此不包含xs
):
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>
有关居中的更多示例,请参见此处
For more examples with regards to centering see here
这篇关于将中心项目可视化为v-flex的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!