ホーム > Vue > How to align v-col, v-select, and v-btn in the center 【Vuetify】
Vue

How to align v-col, v-select, and v-btn in the center 【Vuetify】

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

Table Of Contents

  1. Introduction
  2. Conclusion
  3. Specific Code
  4. Summary
オススメ本

⇨ Click here for the table of contents of Vue articles

This is an article about using Vuetify.

This article is a reference for when you want to align v-col, v-select, and v-btn in the center.

Environment
Nuxt2.15.7
Vuetify:"^2.3.6"

Introduction

<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 as shown above,

the v-btn is aligned to the top, the v-select is aligned to the center, and they do not align nicely side by side.

Conclusion

For the v-col containing v-btn,

display: flex;
align-items: center;

should be added.

Specific Code

<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

Summary

That's it for the article on Vuetify layout.

I hope it can be helpful to someone.

If you have any questions or find any mistakes, please 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!