More than 3 years have passed since last update.

Vuetifyで左右センター揃えにするサンプルコードの備忘録(justify="center") or (class="text-center")

Posted at 2021-05-19

あれー！！
Vuetityでサクッとセンター揃え/中央揃えにするコードってどうだっけー！？
なんでセンター揃えにならないんや！なんでこんな簡単なことをすぐ忘れるんや！って人に向けた備忘録です。

HTML版

Flexboxのグリッドシステムでやりたい場合
v-colのcols="auto"にするのがポイント。これでカラムが自動的に小さくなり、v-rowの justify="center"が効いてくる。
no-guttersはお好みで。

<v-row no-gutters justify="center">
  <v-col cols="auto">
    <span>hogehoge</span>
  </v-col>
</v-row>

text-alignのCSSヘルパーでやりたい場合

<div class="text-center">
   Center揃えtext
</div>

Flexboxのグリッドシステムでやりたい場合

v-row(no-gutters, justify='center')
    v-col(cols='auto')
        span hogehoge

text-alignのCSSヘルパーでやりたい場合

.text-center Center揃えtext

ちゃんと読めば書いてあるけど。。。