vuetifyのalign="center"とjustify="center"について

Question

以下の2つの例だと、"あいうえお"が画面中央に配置されません。

<v-row>
<v-col cols=12 lg=12 md=12 sm=12 justify="center">
  あいうえお
</v-col>
</v-row>

<v-row justify="center">
<v-col cols=12 lg=12 md=12 sm=12>
  あいうえお
</v-col>
</v-row>

しかし、以下の例だと画面中央に配置されます。なぜでしょうか？
justifyが横方向の配置を作り、alignが縦方向の配置を作ると思っていました。
https://vuetifyjs.com/ja/components/grids

<v-row>
<v-col cols=12 lg=12 md=12 sm=12 align="center">
  あいうえお
</v-col>
</v-row>

Answer 1

v-col には align という属性が無いので HTML 属性の align が指定されています。

• http://www.tohoho-web.com/html/attr/align.htm

v-row には align という属性があるので、これを利用します。

• https://codepen.io/niconico25/pen/rNNPKeZ

追記

v-colの属性が書いてある場所はhttps://vuetifyjs.com/en/components/gridsであってますか？

そうです。説明はほとんど書かれていないんですけどね笑

Comments

[yonchome]

v-rowはalign（垂直位置決め）とjustify（水平位置決め）があるのですね。
これでv-colの位置を操作できる。また、v-colはalign（垂直位置決め）とjustify（水平位置決め）を持っていない。
そのためv-colの中身を中央寄せしたいときはHTML属性のalignを使うしか方法がないという理解であってますか？

[nico25]

正しい理解だと **思います**。
公式ドキュメントに v-row の使える属性の一覧が掲載されています。
もし場所がわかるようであれば、確認して見てください。
> v-rowはalign（垂直位置決め）とjustify（水平位置決め）があるのですね。
> これでv-colの位置を操作できる。

正しい理解だと **思います**。
公式ドキュメントに v-col の使える属性の一覧が掲載されています。
もし場所がわかるようであれば、確認して見てください。
> また、v-colはalign（垂直位置決め）とjustify（水平位置決め）を持っていない。

これはちょっと違うかなと思います。
> そのためv-colの中身を中央寄せしたいときは
> HTML属性のalignを使うしか方法がないという理解であってますか？

自分なら
もしインライン要素なら text-align: center を使います。
もしブロックレベル要素なら display: justify; justify-content: center; を使います。
他にもやり方は色々とあるようなのですが、自分もよくわかっていないです。

HTML タグの属性に align を直接使わない理由は、
装飾は CSS 経由で指定した方が良いと聞いたことがあるからです。
（Vuetify では直接 HTML タグの属性に書き込んでるじゃないか、という話はあるのですが...）

恐らく「ブロックレベル要素」と「インライン要素」の違いが、
はっきりしていないのかなと思います。

「ブロックレベル要素」、「インライン要素」、「違い」とかで検索すると
理解が速いかなと思います。

* https://saruwakakun.com/html-css/basic/display

[yonchome]

丁寧なご説明ありがとうございます。
v-rowがブロックレベル要素でv-colがインライン要素というイメージですかね？
v-colの属性が書いてある場所はhttps://vuetifyjs.com/en/components/gridsであってますか？

[nico25]

これはちょっと違うかなと思います。
> v-rowがブロックレベル要素でv-colがインライン要素というイメージですかね？

v-row, v-col は共に div タグに変換されます。
このことは、デベロッパツールから確認できます。
そして div タグはブロックレベル要素です。

追記すると

自分が **v-col の中に書く要素が**
もしインライン要素なら text-align: center を使います。
もしブロックレベル要素なら display: justify; justify-content: center; を使います。

となります。
**v-col の中に書く要素に応じて**、v-col の属性に使う CSS を書き換えます。

[yonchome]

ありがとうございます。
以下まとめました。認識あっていますでしょうか？
vuetifyにはv-row,v-colという独自のタグがある。
特にv-rowにはalign（垂直位置決め）とjustify（水平位置決め）という属性があり、v-colを操作することでグリッドシステムの操作を便利にしている。
一方で紛らわしいが、そもそものHTMLの属性にもalignという属性があり、これは水平位置決めなどの機能をもつ。
v-colの中の要素の中央揃えに関しては普段のHTMLのルールと変わらず、インラインにはtext-align,ブロックにはjustify-contentを用いる。
さらにはv-rowとv-colはともにdivタグに変換される。つまり子要素のv-colを中央揃えするためには親要素のv-rowから独自属性のjustify（水平位置決め）、もしくはHTMLブロック要素に対する手法（justify-content)を用いる。

[nico25]

私も詳しくないのですが、確認します。
> 以下まとめました。認識あっていますでしょうか？

きっと正しいと思います。
> vuetifyにはv-row,v-colという独自のタグがある。

きっと正しいと思います。
> 特にv-rowにはalign（垂直位置決め）とjustify（水平位置決め）という属性があり、
> v-colを操作することでグリッドシステムの操作を便利にしている。

きっと正しいと思います。
> 一方で紛らわしいが、そもそものHTMLの属性にもalignという属性があり、
> これは水平位置決めなどの機能をもつ。

きっと正しいと思います。
> v-colの中の要素の中央揃えに関しては普段のHTMLのルールと変わらず、
> インラインにはtext-align,ブロックにはjustify-contentを用いる。

きっと正しいと思います。
> さらにはv-rowとv-colはともにdivタグに変換される。

きっと正しいと思います。
> つまり子要素のv-colを中央揃えするためには親要素のv-rowから独自のjustify（水平位置決め）、

きっと正しいと思います。
> もしくはHTMLブロック要素に対する手法（justify-content)を用いる。

ただ、少し文言を追記するなら
『もしくは **v-col の style 属性の中で** HTMLブロック要素に対する手法（justify-content)を用いる。』
という書き方になるかなと思います。

[yonchome]

ご確認ありがとうございました、大変勉強になりました！

[nico25]

恐れいります！