问题描述
我正在尝试将
居中到
.由于
是一个 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屋!
更多推荐
[db:关键词]
发布评论