Help us understand the problem. What is going on with this article?

bootstrapのrowで中央寄せにしようとした時の話

More than 1 year has passed since last update.

はじめに

先日、bootstrap4で中央寄せをしようとした時に微妙に引っかかった時の話です。

何をしたかったか

行を追加して、その中の文字列を中央寄せにしたかったので、

sample.html
<div class="row text-center">
    sample
</div>

とやったらうまく効きませんでした。

真ん中寄せ失敗

あれ?divってブロック要素で、text-alignで操作できなかったっけ?と思い、三パターンで比較してみました。

sample.html
<div class="row text-center">
    row sample
</div>
<div class="text-center">
    non row sample
</div>
<div class="row">
    <div class="col text-center">
        row col sample
    </div>
</div>

真ん中寄せ比較
やっぱりrow単体で使うとダメっぽいですね。
開発者ツールで見ると一発でした。
開発者ツール

「user agent stylesheet」で定義してあるdiv要素のdisplay:blockが、rowでflexに上書きされていました。
考えてみれば、そもそもrowはcolのラッパーとして使われるので、display:blockだとcolが並びません。

なんとなく行を増やしたいという理由でrowを使ってしまいましたが、適切なクラスを選択すべき(というか使わないべき)でした。

終わりに

CSSって、見た目は良くても使い方が違うということがあり、間違って使ってることが多そうです。難しい・・・。

karintou
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした