如何使Vuetify的v-chip组件内文本垂直居中？

如果官方没有提供对应的配置属性，可以通过自定义CSS实现文本垂直居中：

方法一：修改自定义类 chips #

在样式文件中添加以下CSS代码：

.chips {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal; /* 避免默认行高导致的文本偏移 */
}

方法二：使用内联样式直接设置 #

直接在v-chip标签上添加内联样式：

<v-chip
   v-if="this.drawerNodeData.type == 'Telecom'"
   :color="telecom"
   text-color="white"
   class="chips"
   style="display: flex; align-items: center;"
>
   {{ this.drawerNodeData.type }}
</v-chip>

补充说明 #

如果仍存在偏移，检查是否有其他自定义CSS修改了v-chip的高度、内边距或行高属性，这些属性可能会干扰垂直居中布局，需要做相应调整。

内容的提问来源于stack exchange，提问作者Quentin