CODEWITHSUNDEEP
htmlcssvue.jsvuetify.js
Florent Bouisset
Florent Bouisset

Reputation: 1075

Vuetify, how to center content and strech a column

I'm trying to have a layout with 2 columns, I want them to have the same height and the content inside should be centered verticaly.

Here is my code in vuetify

<div id="app">
  <v-app>
    <v-row align="center">
      <v-col cols=6 style="background-color: #FF5000;"  align="center">
           <v-btn class="m">Column 1</v-btn>
      </v-col>
      <v-col cols=6 style="background-color: #5fc3c7;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </v-col>
    </v-row>
  </v-app>
</div>

I have tried to change <v-row align="center"> to <v-row align="stretch"> the column is stretch as I want but the content is not center..

Any help would be great strech

center

Upvotes: 5

Views: 17024

Answers (2)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

As Tingsen Cheng mentioned, you can add flex styles to your v-col to achieve vertical center. Additionally, as of Vuetify 2.3.10, you can make use of their flex helper which gives you utility classes to control your layout with ease.

So instead of using inline style, you can use just use something like this: class="d-flex justify-center align-center"

<v-row align="stretch">
  <v-col 
    cols="6"
    style="background-color: #FF5000;"
    class="d-flex justify-center align-center"
  >
    <v-btn>...</v-btn>
  </v-col>
  <v-col cols="6" style="background-color: #5fc3c7;">...</v-col>
</v-row>

Here is a demo at codesandbox.

Upvotes: 16

Terence Cheng
Terence Cheng

Reputation: 594

You can add some css styles in v-col, using the flex to achieve the vertical middle

<v-col cols=6 style="background-color: #FF5000; display: flex; align-items: center; justify-content: center"  align="center">

https://codepen.io/chengtingsen/pen/abNGxLd

Upvotes: 1

Related Questions