text-align

block-level elementに対して指定する

内部のinline-level elementの水平方向の配置を指定する

①②のパターンがある

①子がインライン要素

自分(ブロック要素)に対しての、子孫(インライン要素)の配置を指定する

code:html

<p class="text">hogehoge</p>

</div>

code:css

.container {

background-color: red;

text-align: center;

}

.text {

background-color: yellow;

margin: 0 auto;

display: inline-block; // pはブロック要素だが、インライン要素に変換

}

https://gyazo.com/aa7b9214726933ec73f308d17a706bf2

②子がtextである

その要素内で、textの配置が中央になる

「素のtextはインライン要素」というふうに考えれば、①と統一的に捉えられるmrsekut.icon

例

code:html

// pはブロック要素

// hogehogeは素のテキスト(インライン要素)

<p class="text">hogehoge</p>

code:css

.text {

background-color: yellow;

text-align: center;

}

https://gyazo.com/45e1bfab34cfc395609f1270148fed32