ホーム > 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.

If you have any questions or find any typos, feel free to contact me via Twitter DM.

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!