Vue

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ 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>

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

参考

Vuetify-Grid

まとめ

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

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

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