如何在Vuetify或Material Design中进行这样的中心布局？

Question

我现在有这样的布局:

但我的最终目标是,主要内容集中在一起.工具栏和页面标题居中,但左侧有点:

这是我在Vuetify/Vue中的模板布局

<v-tabs dark fixed centered>
   <v-toolbar extended class="cyan" dark>
     <v-toolbar-side-icon></v-toolbar-side-icon>
     <v-spacer></v-spacer>

     <v-btn icon>
       <v-icon>search</v-icon>
     </v-btn>
     <v-btn icon>
       <v-icon>more_vert</v-icon>
     </v-btn>

       <v-toolbar-title slot="extension" class="display-3">Share My Pic</v-toolbar-title>

   </v-toolbar>
   <v-tabs-bar slot="activators" class="cyan ">
     <v-tabs-slider class="yellow" >Slider</v-tabs-slider>
     <v-tabs-item
       v-for="i in tabArray"
        :key="i"
        :href="'#tab-' + i">
       {{i}}
     </v-tabs-item>
   </v-tabs-bar>
   <v-tabs-content
     v-for="i in 3"
     :key="i"
     :id="'tab-' + i"
   >
     <v-card flat>
       <v-card-text>{{ text }}</v-card-text>
     </v-card>
   </v-tabs-content>
 </v-tabs>

请帮忙.任何有利于我朝着正确方向前进的建议都表示赞赏.

-Adi

Answer 1

这不是一个很好的答案,因为我不熟悉Vuetify.但是,我可以告诉你如何进行你想做的定心.

该Flexbox将是一个非常有用的CSS显示类型.我注意到Vuetify将它用于很多布局.

你想要的是一个居中的块,其内容是左对齐的.你可以通过拥有这些CSS设置的全宽容器来实现这一点:

{
  display: flex;
  justify-content: center;
}

在其中,另一个具有以下设置的容器:

{
  justify-content: flex-start;
  max-width: 600px; // or however wide you want your content block to be
  width: 100%;
}

(将此容器居中的pre-flexbox方法是将左右边距设置为auto)

在下面的代码段中,我为中心区块的背景着色,以便您可以看到它们的位置.背景不对齐,因为toolbar__title该类margin-left由Vuetify 给出,但文本合理地对齐.

您需要单击"整页"链接,然后调整窗口大小以查看实际布局.

new Vue({
  el: '#app',
  data: {
    tabArray: ['Home', 'Feed']
  }
})

.toolbar__extension,
.tabs__wrapper {
  display: flex;
  justify-content: center;
}

.toolbar__title,
.tabs__container {
  background-color: rgba(255, 255, 255, 0.2);
  justify-content: flex-start !important;
  max-width: 600px;
  width: 100%;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <main>
      <v-tabs dark fixed centered>
        <v-toolbar extended class="cyan" dark>
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>search</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>more_vert</v-icon>
          </v-btn>

          <v-toolbar-title slot="extension" class="display-2 centered">Share My Pic</v-toolbar-title>

        </v-toolbar>
        <v-tabs-bar slot="activators" class="cyan ">
          <v-tabs-slider class="yellow">Slider</v-tabs-slider>
          <v-tabs-item v-for="i in tabArray" :key="i" :href="'#tab-' + i">
            {{i}}
          </v-tabs-item>
        </v-tabs-bar>
        <v-tabs-content v-for="i in 3" :key="i" :id="'tab-' + i">
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tabs-content>
      </v-tabs>
    </main>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>