如何将Vuetify3块级按钮内的元素对齐到两侧？

要实现左侧图标按钮靠左、右侧图标靠右、文本居中的效果，你可以利用Vuetify的flex布局类直接在<v-btn>上配置，无需复杂的嵌套组件：

<v-btn block size="x-large" class="d-flex align-center">
  <!-- 左侧图标按钮 -->
  <v-btn icon size="small" variant="contained">
    <v-icon>mdi-information</v-icon>
  </v-btn>
  <!-- 中间文本，占满剩余空间并居中 -->
  <span class="flex-grow-1 text-center">Button Text</span>
  <!-- 右侧图标 -->
  <v-icon>mdi-check</v-icon>
</v-btn>

关键说明： #

• d-flex：让按钮内部启用flex布局，这是实现元素对齐的基础
• align-center：确保所有元素在垂直方向上居中对齐
• flex-grow-1：给中间的文本容器设置自动填充剩余空间，这样左右元素会被“挤”到按钮的边缘位置
• text-center：让文本在剩余空间内水平居中

为什么之前的方法没生效？ #

• v-spacer无效：v-spacer需要在明确的flex容器中工作，且默认会占据所有可用空间，但直接放在<v-btn>内时，可能因按钮内部的默认样式限制导致无法正常发挥作用
• v-row错位：v-row自带默认的间距和布局规则，直接嵌套在按钮内会破坏按钮的内部布局，导致元素溢出或错位

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