ホーム

転職ドラフト(次回1/19)

エンジニア向け
オススメ転職サイト1選


2021年
買ってよかったもの
ベスト3

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

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

⇨ Vue 記事の目次はこちら

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

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

環境
Nuxt2.15.7
Vuetify:"^2.3.6"

目次

  1. 事例の紹介
  2. 結論
  3. 具体的なコード

事例の紹介

<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 からご連絡ください。