How to do center layout like this in Vuetify or Material Design?

Question

I have this layout as of now:

But my end goal is this, main content is centered. toolbar and page title is centered but a little bit on the left:

Here's my template layout in 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>

Kindly help pls. Any good advice to move me in the right direction is appreciated.

-Adi

You will want to break this down. There is a whole lot of programming between you and your goal layout. You don't have any CSS included here, and that's pretty much where your issues are going to be solved. — Roy J

Roy J Roy J · Accepted Answer · 2017-07-19T13:22:38

This will not be a great answer because I am not familiar with Vuetify. However, I can tell you how to do the centering that you want to do.

The flexbox is a very useful CSS display type. I notice that Vuetify uses it for a lot of their layout.

What you want is a centered block whose contents are left-justified. You can get this by having a full-width container with these CSS settings:

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

and within it, another container with these settings:

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

(a pre-flexbox way to center this container is to have left and right margins set to auto)

In the snippet below, I have colored the backgrounds of the centered blocks so you can see where they are. The backgrounds do not align because the toolbar__title class is given a margin-left by Vuetify, but the text aligns reasonably well.

You will want to click the "Full page" link and then resize the window to see the layout in action.

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>

How to do center layout like this in Vuetify or Material Design?

3 Answers