More than 5 years have passed since last update.

【CSS】text-align

Posted at 2020-01-16

text-align

ブロック要素のなかにある、インライン要素、インラインブロック要素の配置を指定できる

左寄せ

例.html

    <div class="position">
      <span>ここだよ</span>
    </div>

例.css

.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: left;
}

Web
↓

文字が左寄せになっているのがわかるかと思います

中央揃え

例.css

.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: center;
}

Web
↓

文字が中央揃えになっています

右寄せ

例.css

.position {
  width: 300px;
  height: 200px;
  background-color: orange;
  text-align: right;
}

Web
↓

右寄せになりました

今回であれば text-align を

例.css

span {
  text-align: right;
}

上記のように span にかけてしまいそうですが
span にかけてしまっても何も反応しません。
理由は一番最初に書いたとおり

**ブロック要素のなかにある、**インライン要素、インラインブロック要素の配置を指定できる

からです。
つまり今回で言えば幅：300px のブロック要素のなかにある
インライン要素の span を右寄せしてね
っていう命令をすることで span は右寄せになります。

なので span に text-align: right; をかけてしまっても
え？え？右ってどこまで右に行けばいいの？？
text-align: center; なんてかけようもんなら
右も左もわかんないのに中央なんてどこなのさ！
と span ちゃんが困ってしまって何も反応しません