HTML上で、文字やHTML要素をを左寄せ、右寄せ、中央寄せする方法です。

HTMLでの文字の右寄せ、左寄せ、中央寄せ

HTMLで文字を右寄せ、左寄せ、中央寄せするには、CSSプロパティ「text-align」を使います。まずは、HTMLタグの中に、直接CSSのプロパティを書き込む、インライン形式で書いてみます。

CSSで文字を右寄せする

右寄せしたいHTML要素に、「text-align: right」を割り当てることで、その中にあるテキストが右寄せされます。寄せたいテキストを囲んでいる要素に、CSSを設定するようにして下さい。

<p style="text-align: right">
  この文字は右寄せされます！
</p>

CSSで文字を左寄せする

同じように、「text-align: left」を割り当てることで、その中にあるテキストが左寄せされます。

これはHTML文書では、デフォルトの振る舞いですので、この左寄せCSSプロパティを書いても、何も書かなくても同じ動作となるはずです。

<p style="text-align: left">
  この文字は左寄せされます！
</p>
<p>
  ま、もともと左寄せなんですけどね。
</p>

CSSで文字を中央寄せする

最後に、中央寄せです。もう予想がついている方もいるかもしれませんが、「text-align: center」を割り当てれば、中央寄せされます。

<p style="text-align: center">
  この文字は中央寄せされます！
</p>

HTMLでの画像（IMGタグ）の右寄せ、左寄せ、中央寄せ

テキストと同じように、IMGタグの画像もCSSプロパティ「text-align」を使って寄せることができます。ただし、IMGタグそのものではなく、IMGタグを囲む要素（p や div）に設定するようにして下さい。

<p style="text-align: right">
  <img src="//www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" width="60" height="60" >
</p>
<hr>
<p style="text-align: left">
  <img src="//www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" width="60" height="60">
</p>
<hr>
<p style="text-align: center">
  <img src="//www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" width="60" height="60">
</p>

なぜ、IMGタグに直接「〜寄せ」のCSSを書いてはだめなの？

少し解説すると、<img>タグは「インラインレベル」というHTML要素です。（厳密には違いますが、説明が難しいので、よく似た振る舞いをする、と思って良いです。）

インラインレベルのHTML要素は、いわゆるただのテキスト文字列と似たレイアウトのルールで表示されます。ですので、IMGタグも、ただの文字を右寄せ・中央寄せするときと同じように、その多少を囲む「親」となる要素に設定するようにしてくださいね。

<span style="text-align: right">
  これはうまく行きません。
</span>
<hr>
<a href="/" style="text-align: right">
 これもうまく行きません。
</a>
<hr>
<div style="text-align: right">
  <span>右寄せされます。</span>
</div>
<hr>
<div style="text-align: right">
  <a href="/">右寄せされます。</a>
</div>

参考リンク

HTMLの中央寄せは、実はもっと奥が深いです。興味のある方は、こちらのCSSを使った中央寄せに関するまとめた記事をぜひご覧下さい。この記事では、インライン・ブロックレベルについても詳しく解説してあります。

• CSS：上下左右への中央寄せ方法、全部まとめ

また、画像の周りに文字を回り込ませるテクニックも役立つと思います。次のステップに是非挑戦してみて下さい。

• HTML：画像に文字を回り込ませる。CSS「float」の利用