特定の部分を span 要素で指定して右寄せやセンタリングしたいと思ったのに、text-align が効かない！
と困っている方へ。
原因と解決方法を説明します。
span要素でtext-alignが効かない原因
text-alignはテキストの水平方向の配置（右寄せ・左寄せ・中央揃え）を指定するプロパティです。
そして、text-align は、ブロック要素にしか適用されません。
そのため、ブロック要素ではない span（inline要素）に text-align だけを設定しても文字要素の水平方向配置を調整できないのです。
具体的に見てみましょう。
text-alignが効かない書き方
例えば、下の文章で最後一行を右寄せしたいとしましょう。
吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩は猫である 夏目漱石
以下のように span で範囲を指定してその範囲のスタイルとして text-align: right（右寄せ）を指定しても、指定箇所は右寄せにはなりません。
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<br /><span style="text-align: right;">吾輩は猫である 夏目漱石</span></p>この書き方だと、このように表示されます。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
理由は、冒頭で説明した通り <span> がインライン要素でブロック要素ではないからです。
じゃあ、どうしたらいいの？
text-alignを効かせる書き方 htmlに直接記述する方法
span で指定した部分をブロック要素にすれば良いんです！
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<br /><span style="display: block; text-align: right;">吾輩は猫である 夏目漱石</span></p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
最終行が右寄せで表示されましたね。
インライン要素<span>で範囲指定した部分のスタイルは、「ブロックで表示し、指定した範囲内は右寄せで表示せよ」と設定すればよいということです。
最後の一行をセンタリングしたいならは、text-align の属性値を center にすればよいです。
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<br /><span style="display: block; text-align: center;">吾輩は猫である 夏目漱石</span></p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
ちなみに…
<p>はブロック要素なので、pタグの中に style=” “を追加すれば右寄せや中央揃えをすることができます。
具体的には、下記を参照してみてね。（最終行の pタグに中央揃えのスタイルを記述した例）
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
</p>
<p style="text-align: center;"吾輩は猫である 夏目漱石</p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
インライン要素のスタイルを html に記述するか、css で設定するか
スタイルを html に直接記述してもcss で設定しても、ウェブページ上の表示に変わりはありません。
上記の例を含め、スタイルを直接記述するかあるいは css で設定するかは、以下２点を考えて判断すればよいです。
（１）一部のページで限定的にそのスタイルを適用したい
（２）サイト全体の複数個所で同じスタイルを頻繁に適用したい
「この部分にだけスタイルを適用したいけど、他の部分やほかのページに同じスタイルを適用する予定はない」と思うなら、html に直接記述すればよいです。
「サイト全体で同じスタイルを適用したい箇所が多い」なら、css でクラスを設定したほうがスタイルを管理しやすく、便利で間違いの可能性を減らせるでしょう。
cssで <p>配下の<span>にスタイルを適用する方法
<p>～</p>の範囲内で<span>～</span>にスタイルを適用する手順を説明します。
※ html の<head>～</head>に読み込むべきcssファイルが定義されていることを確認しておいてくださいね
<span>～</span>で範囲指定した箇所にクラスを設定して指定箇所を右寄せする
css の記述
pタグ配下に”right”というクラスを設定したら
block要素として表示し
右寄せする
.right {
display: block;
text-align: right;
}html の記述
spanで指定した部分に
右寄せを適用する
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<br /><span class="right">吾輩は猫である 夏目漱石</span></p>ウェブページの表示
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
<span>～</span>で範囲指定した箇所にクラスを設定して指定箇所をセンタリングする
pタグ配下に”center”というクラスを設定したら
block要素として表示し
右寄せする
.center {
display: block;
text-align: center;
}html の記述
pタグ内で spanで指定した部分に
右寄せを適用する
<p>吾輩は猫である。名前はまだ無い。<br />どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<br /><span class="center">吾輩は猫である 夏目漱石</span></p>ウェブページの表示
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である 夏目漱石
以上 span で範囲指定した箇所に右寄せやセンタリングのスタイルを適用する手順の説明です。
ご参考になれば幸いです♪