如何将vuetify组件的v-select文本居中对齐
如何将vuetify组件的v-select文本居中对齐
提问于 2019-02-05 14:20:19
我正在使用Vuetify select component。如何将文本与下拉列表一起居中对齐？
已尝试使用text-md-center，但不起作用
<v-select
:items="['Lagna Kundali']"
label="Rasi" solo
v-model="firstKundali"
class="text-md-center"
>回答 3
Stack Overflow用户
发布于 2019-08-23 11:54:22
您可以通过添加此css样式来修复它：
.v-select__selection {
width: 100%;
justify-content: center;
}Stack Overflow用户
发布于 2020-10-06 10:33:59
你可以使用vuetify :selection(在2.3.10中测试过)，所以不需要修改CSS。简单明了：
<v-select
:items="items"
outlined
:item-text="label"
item-value="value"
>
<template v-slot:selection="{ item }">
<span class="d-flex justify-center" style="width: 100%;">
{{ item.label }}
</span>
</template>
</v-select>Stack Overflow用户
发布于 2019-02-06 06:58:15
对验证v2之前的版本有效
将组件包装在grid system中。在v-layout组件中，您可以指定justify-center。请看一下example。
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout row wrap justify-center>
<v-flex xs6>
<v-select></v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54536464
复制相关文章
相似问题
vuetify的v-select组件中的搜索栏
vuetify v-select laravel
如何将JSF组件居中对齐
如何将文本居中对齐
Vuetify如何轻松访问v-select项目-文本值？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
