How to assign the logo in toolbar (v- app-bar) in the middle?

Question

How do I assign the logo in the middle or center of the toolbar (v-app-bar)

I have tried to put the <v-spacer></v-spacer> to make it go to the center but the logo not exactly in the center.

<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>

I want the logo to be exactly in the middle or center.

Answer 1

If you need to force your logo on center, you can try add below for you logo tag:

display: block
margin: 0 auto

You tag could be <img src="logo.png" class="logoPng" align-center center height="35px">, then add to style .logoPng.

See this editor.