Vuetify：如何实现v-select与v-btn组件的水平对齐？

当前未对齐效果：

问题原因 #

v-select（尤其是设置了density="compact"时）和v-btn的默认垂直布局、内边距存在差异，导致两者无法自然对齐。

解决方案 #

最简洁的方式是给父容器添加flex布局并设置垂直居中：

修改后的代码：

<template>
  <v-app>
    <v-container class="d-flex align-items-center">
      <v-btn variant="outlined">Test</v-btn>
      <v-select
        v-model="selected"
        class="d-inline-flex"
        variant="outlined"
        density="compact"
        :items="['Item1', 'Item2']"
        hide-details
      ></v-select>
      <v-btn variant="outlined">Test</v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('Item1')
</script>

其他可选方案 #

• 统一组件尺寸：给v-btn也添加density="compact"，或者移除v-select的density="compact"，使两者高度一致
• 单独调整垂直对齐：给v-select添加class="align-self-center"，利用flex布局的自对齐属性修正位置

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