ホーム > Vue > v-colとv-selectとv-btnを中央揃えに配置する方法【Vuetify】
Vue

v-colとv-selectとv-btnを中央揃えに配置する方法【Vuetify】

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 事例の紹介
  2. 結論
  3. 具体的なコード
  4. まとめ
オススメ本

⇨ Vue 記事の目次はこちら

Vuetify の使い方に関する記事です。

v-col と v-select と v-btn を中央揃えに配置したいときに参考になる記事です

環境
Nuxt2.15.7
Vuetify:"^2.3.6"

事例の紹介

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

このように、v-select と v-btn を、v-col を使って横並びにしようとしたら、

v-btn は上寄せに配置され、v-select は中央に配置されて、綺麗に横並びになりませんでした。

結論

v-btn の方の v-col に対して、

display: flex;
align-items: center;

をつければ良いです。

具体的なコード

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

参考

Vuetify-Grid

まとめ

以上、Vuetify のレイアウトに関する記事でした。

誰かの参考になれば幸いです。

質問、誤植などあれば TwitterDM からご連絡ください。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。