Css 在Vuetify导航栏中居中显示徽标

我的Vue/Vuetify应用程序有一个带有以下元素的导航栏

汉堡包菜单

链接到主页的SVG徽标

一些导航链接

我想左对齐菜单，居中的标志，并右下车的导航链接。以下是我正在使用的标记：

  <v-app-bar app>
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item v-for="(menuItem, index) in menuItems"
                     :to="menuItem.route"
                     :key="index">
          {{ menuItem.text }}
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <v-spacer />

    <router-link v-for="(menuItem, index) in menuItems"
                 :key="index"
                 :to="menuItem.route">
      {{ menuItem.text }}
    </router-link>
  </v-app-bar>

{{menuItem.text}
{{menuItem.text}

---

我曾多次尝试将徽标居中，但都没有成功。您可以像这样使用

v-spacer

：

<v-app-bar>
  <v-menu>
     // some code 
  </v-menu>

  <v-spacer></v-spacer>

  <!-- logo --->
  <router-link :to="{name: 'home'}">
     <v-img src="../assets/logo.svg" width="110px" />
  </router-link>

  <v-spacer></v-spacer>

  <router-link>
    // some code
  </router-link>
</v-app-bar>

//一些代码
//一些代码

这取决于你想要达到的目标

如果您需要将徽标居中，无论其他组件占用多少空间，请执行以下操作（但这将很棘手，因为这将取决于右侧路由器链接的长度以及它们占用的空间大小）

{{menuItem.text}
{{menuItem.text}
.把我放在中间{
位置：绝对位置；
左边距：50%；
转换：转换（-50%，0）；
}

尽管如此，您仍然可以使用Vuetify提供的Flexbox类在这三个部分之间平均分配空间，如下所示（另外，在徽标周围使用v形垫片也可以做到这一点）

{{menuItem.text}
{{menuItem.text}

---

祝你好运。

你能提供呈现的html和css吗？这不太管用，它在徽标的左右两侧放置了等量的水平空白，但是它并没有在它的父级中水平居中，我想我需要类

center me

的CSS规则，以便使用第一个解决方案。它在我在本节中提供的第一个解决方案代码中。如果看不到，请向下滚动代码。谢谢，我错过了

<template>
    <v-app>
        <v-app-bar app>
            <!-- hamburger menu --->
            <template #activator="{ on, attrs }">
                <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
            </template>
            <v-list>
                <v-list-item
                    v-for="(menuItem, index) in menuItems"
                    :to="menuItem.route"
                    :key="index"
                >{{ menuItem.text }}</v-list-item>
            </v-list>

            <!-- logo --->
            <div class="center-me">
                <router-link :to="{name: 'home'}">
                    <v-img src="@/assets/logo.svg" width="110px" />
                </router-link>
            </div>

            <!-- navigation links --->
            <v-spacer />
            <div class="d-flex flex-row">
                <router-link
                    v-for="(menuItem, index) in menuItems"
                    :key="index"
                    :to="menuItem.route"
                >{{ menuItem.text }}</router-link>
            </div>
        </v-app-bar>
    </v-app>
</template>

<style scoped>
    .center-me {
        position: absolute;
        margin-left: 50%;
        transform: translate(-50%, 0);
    }
</style>

<v-app-bar app>
  <div class="d-flex flex-row justify-space-between align-center" style="width:100%">
    <!-- hamburger menu --->
    <v-menu>
      <template #activator="{ on, attrs }">
        <v-app-bar-nav-icon v-bind="attrs" v-on="on" />
      </template>
      <v-list>
        <v-list-item
          v-for="(menuItem, index) in menuItems"
          :to="menuItem.route"
          :key="index"
        >{{ menuItem.text }}</v-list-item>
      </v-list>
    </v-menu>

    <!-- logo --->
    <router-link :to="{name: 'home'}">
      <v-img src="../assets/logo.svg" width="110px" />
    </router-link>

    <!-- navigation links --->
    <div class="d-flex flex-row">
      <router-link
        v-for="(menuItem, index) in menuItems"
        :key="index"
        :to="menuItem.route"
      >{{ menuItem.text }}</router-link>
    </div>
  </div>
</v-app-bar>