Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vue.js コンテンツを右寄せ、中央揃えにする

More than 1 year has passed since last update.

要素を右寄せにする

参考

bootstrap-vue-layout
https://bootstrap-vue.js.org/docs/components/layout/

Bootstrap4に用意されているクラス【flex編】
https://webnetamemo.com/coding/bootstrap4/201906138320

スクリーンショット 2019-10-04 8.07.36.png

もう迷わない!CSS Flexboxの使い方を徹底解説
https://webdesign-trends.net/entry/8148


b-container

親要素に指定する
flexboxの親要素(container)として扱われる
container以下の要素は全て子要素(item)になる

d-flex

flexboxを使用するためのクラス

justify-content-end

子要素を右寄せにするためのクラス

some_component.vue
<b-container class="d-flex justify-content-end">
  hoge
</b-container>

これで要素を右寄せに出来る。

中央揃えの場合は

justifiy-content-center

を使用。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away