text-alignが効かない場合の原因

■ 1. インライン要素に対して適用している

text-align は親ブロック要素に対して適用し、その中のインライン要素やテキストに効果があります。

NG例（効かない）：

<span style="text-align: center;">テキスト</span> <!-- 効かない -->

OK例：

<div style="text-align: center;">
  <span>テキスト</span>
</div>

例えば

などのブロック要素は text-align ではなく margin: 0 auto; や flexbox などで中央寄せを行う。

NG例（text-align はテキスト用なのでブロック要素には効かない）：

<div style="text-align: center;">
  <div>中央にしたいブロック</div> <!-- 効かない -->
</div>

OK例（親に text-align、子はインラインブロック）：

<div style="text-align: center;">
  <div style="display: inline-block;">中央にしたいブロック</div>
</div>

他のCSSで text-align が上書きされている

!important がどこかに指定されていて上書きされない

display: flex や display: grid を指定している場合は、text-align は一部の状況でしか効かず、代わりに以下を使う：

justify-content: center;（横方向）

align-items: center;（縦方向）

画像やボタンなどを中央にしたい場合、text-align ではなく要素自体をインライン要素化 (display: inline-block) した上で、親要素に text-align を指定する必要がある。