时间戳

首页 > 解决方案 > 如何在中间的工具栏（v-app-bar）中分配标志？

vue.js - 如何在中间的工具栏（v-app-bar）中分配标志？

问题描述

如何在工具栏的中间或中心分配徽标（v-app-bar）

我试图把<v-spacer></v-spacer>它放到中心，但标志不完全在中心。

<v-app-bar
      :clipped-left="clipped"
      fixed
      app
      color="rgb(25,0,51, 0.85)"
      height="80px"
      align-center justify-center
    >
    <v-spacing></v-spacing>
    <v-btn
        icon
        @click="drawer = !drawer"
      >
        <v-icon color="#d19f4e">{{ drawer ? 'menu' : 'menu' }}</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-toolbar-items  class="hidden-sm-and-down">
     <v-btn text>Menu 1</v-btn>
    <v-btn text>Menu 2</v-btn>
    <v-btn text>Menu 3</v-btn>
    </v-toolbar-items>
      <v-spacer></v-spacer>
     <img src="logo.png" align-center justify-center height="35px">
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
      <v-btn text>Menu 1</v-btn>
    <v-btn text>Menu 2</v-btn>
    <v-btn text>Menu 3</v-btn>
    </v-toolbar-items>
     <v-spacer></v-spacer>

      <v-btn
        icon
        @click.stop="rightDrawer = !rightDrawer"
      >
        <v-icon color="#D19F4E">favorite</v-icon>
      </v-btn>
      <v-spacing></v-spacing>
    </v-app-bar>

我希望徽标恰好位于中间或中心。

标签： vue.jsvuetify.js

解决方案

如果您需要强制将您的徽标放在中心，您可以尝试在下面为您的徽标标签添加：

display: block
margin: 0 auto

你的标签可以是<img src="logo.png" class="logoPng" align-center center height="35px">，然后添加到 style.logoPng中。

看到这个编辑器。

推荐阅读