中心v-工具栏标题

Question

我想将标题放在工具栏组件的中央。 这就是它的样子：

这是我的组件：

declare @ean varchar(40)

exec dbo.generateEAN 1, '', @ean output

update t 
set Twr_Ean = @ean 
from dbo.table t  
where t.Code = ''

我无法相对于工具栏正确居中。也许我应该使用flex属性？顺便说一下，我正在使用Vuetify.js进行材质设计。

如果您能帮助我，我将不胜感激。 我对flex和vuejs完全陌生。

Answer 1

我在 v-toolbar-title 标签中添加了 flex text-center 类。这些类以标题为中心。

<v-toolbar-title class="flex text-center">
      <h4>Centered Title</h4>
 </v-toolbar-title>

Answer 2

在标题前添加v-spacer

    <v-spacer></v-spacer>
    <v-toolbar-title class="white--text">{{title}}</v-toolbar-title>

Answer 3

在我的情况下，我只有<v-toolbar-title>，因此必须在其左右两边都放<v-space />：

<v-toolbar>
  <v-spacer />
  <v-toolbar-title>
    Some title text
  </v-toolbar-title>
  <v-spacer />
</v-toolbar>