如何在含其他元素的Vuetify应用栏中精准居中Logo？

问题描述 #

需要将Logo精准显示在Vuetify应用栏正中间，同时适配栏内其他元素（左侧菜单按钮、右侧用户/搜索按钮）。曾尝试在<v-app-bar-nav-icon>后添加<v-spacer>，但未达到居中效果，目标效果参考Nuxt官网移动端（屏幕小于md尺寸）的应用栏样式。

原代码如下：

<v-app-bar fixed app>
      <v-app-bar-nav-icon
        aria-label="show-or-hide-navigation-menu"
        @click.stop="drawer = !drawer"
      />
      <nuxt-link aria-label="home-page" to="/">
        <v-img
          v-show="searchClosed"
          :src="require('~/assets/images/example_Logo.svg')"
          max-height="55px"
          max-width="110px"
          class="mb-1"
          contain
        ></v-img>
      </nuxt-link>
      <v-spacer v-show="searchClosed"></v-spacer>
      <v-btn v-show="searchClosed" aria-label="show-user-menu" icon>
        <v-icon>mdi-account-circle</v-icon>
      </v-btn>

      <transition name="slide-fade">
        <nav-search
          v-show="!searchClosed"
          @search-opened="searchClosed = false"
          @search-closed="searchClosed = true"
        ></nav-search>
      </transition>

      <v-btn
        v-show="searchClosed"
        aria-label="show-or-hide-search-input"
        icon
        @click="searchClosed = false"
      >
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-app-bar>

解决方案 #

核心是让应用栏左右两侧元素的占位宽度对称，或直接强制Logo居中，以下是两种可行方法：

方法一：对称<v-spacer>布局 #

原代码仅添加单个<v-spacer>，导致左右空间失衡。需给Logo两侧都添加<v-spacer>，并将右侧按钮组包裹为一个整体，确保左右占位宽度一致：

修改后代码：

<v-app-bar fixed app>
  <!-- 左侧菜单按钮 -->
  <v-app-bar-nav-icon
    aria-label="show-or-hide-navigation-menu"
    @click.stop="drawer = !drawer"
  />

  <!-- 左侧 spacer，平衡右侧按钮组宽度 -->
  <v-spacer v-show="searchClosed"></v-spacer>

  <!-- 居中Logo，添加d-flex justify-center确保自身内部居中 -->
  <nuxt-link aria-label="home-page" to="/" class="d-flex justify-center">
    <v-img
      v-show="searchClosed"
      :src="require('~/assets/images/example_Logo.svg')"
      max-height="55px"
      max-width="110px"
      class="mb-1"
      contain
    ></v-img>
  </nuxt-link>

  <!-- 右侧 spacer，平衡左侧菜单按钮宽度 -->
  <v-spacer v-show="searchClosed"></v-spacer>

  <!-- 右侧按钮组，统一为一个容器避免布局混乱 -->
  <div class="d-flex" v-show="searchClosed">
    <v-btn aria-label="show-user-menu" icon>
      <v-icon>mdi-account-circle</v-icon>
    </v-btn>
    <v-btn
      aria-label="show-or-hide-search-input"
      icon
      @click="searchClosed = false"
    >
      <v-icon>mdi-magnify</v-icon>
    </v-btn>
  </div>

  <!-- 搜索组件保持原逻辑 -->
  <transition name="slide-fade">
    <nav-search
      v-show="!searchClosed"
      @search-opened="searchClosed = false"
      @search-closed="searchClosed = true"
    ></nav-search>
  </transition>
</v-app-bar>

方法二：CSS绝对定位强制居中 #

如果对称布局仍有偏差，可通过CSS绝对定位让Logo不受左右元素影响，精准居中：

1. 添加自定义样式（可放在组件的<style>标签中）：

.center-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 可选：添加z-index确保Logo在顶层 */
  z-index: 1;
}

2. 修改Logo部分代码：

<nuxt-link aria-label="home-page" to="/" class="center-logo">
  <v-img
    v-show="searchClosed"
    :src="require('~/assets/images/example_Logo.svg')"
    max-height="55px"
    max-width="110px"
    class="mb-1"
    contain
  ></v-img>
</nuxt-link>

注意：需确保Logo宽度不会超过应用栏可用空间，避免与左右按钮重叠，可给应用栏添加px-4类增加左右内边距。

适配搜索组件状态 #

当搜索组件展开时（searchClosed=false），原代码的v-show逻辑会自动隐藏Logo和右侧按钮，确保搜索栏占满空间，无需额外修改。

内容的提问来源于stack exchange，提问作者Kos-Mos