HTML:文字を右寄せ・左寄せ・中央寄せする方法

最終更新:2018-11-21 by Joe

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タグも、ただの文字を右寄せ・中央寄せするときと同じように、その多少を囲む「親」となる要素に設定するようにしてくださいね。

あれ、うまくいかない?よくある間違い

なんだかうまくいかない場合・・、やはり、上述のように、text-align を設定しているHTML要素がインラインレベルという状態になっている可能性があります。

そんな時は、div要素を使って、もう一つ親を増やしてあげて下さい。div 要素は「ブロックレベル」と呼ばれ、自分の内側にあるテキストを右・左・中央に寄せる事ができる種類の要素です。

<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のインラインレベル、ブロックレベルの違いに注意して右寄せ・中央寄せしましょう!

参考リンク

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

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