ホーム > Vue > How to Center Align v-col, v-select, and v-btn in Vuetify
Vue

How to Center Align v-col, v-select, and v-btn in Vuetify

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. Example
  2. Solution
  3. Code Example
  4. Conclusion

A guide on how to center align v-col, v-select, and v-btn in Vuetify.

PR

Environment

Nuxt2.15.7
Vuetify:"^2.3.6"

Example

<v-row>
  <v-col cols="6">
    <v-select></v-select>
  </v-col>
  <v-col cols="6">
    <v-btn text>Update</v-btn>
  </v-col>
</v-row>

When trying to align v-select and v-btn side by side using v-col, the v-btn is aligned to the top, while the v-select is centered, resulting in a misaligned layout.

Solution

Apply the following styles to the v-col containing the v-btn:

display: flex;
align-items: center;

Code Example

<v-row>
  <v-col cols="6">
    <v-select></v-select>
  </v-col>
  <v-col cols="6" class="d-flex align-center">
    <v-btn text>Edit</v-btn>
  </v-col>
</v-row>

Reference

Vuetify-Grid

Conclusion

This was an article about layouts in Vuetify.

I hope this helps someone.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!