開発ブログ
Git、CSS、HTML、正規表現など、入門者がつまづきそうなポイントを中心に、役立ち情報発信します。。

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

最終更新:2018-03-07 by Joe

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

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

HTMLで文字を右寄せ、左寄せ、中央寄せするには、CSSプロパティ「text-align」を使います。

CSSで文字を右寄せする

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

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

CSSで文字を左寄せする

同じように、「text-align: left」を割り当てることで、その中にあるテキストが左寄せされます。これはデフォルトの振る舞いですので、このCSSプロパティを何も書かなくても最初は書いたのと同じ動作となっています。HTMLのテキストがすべて左寄せされているのは、そのためです。

<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>タグは「インラインレベル」という状態で、文字と似ている振る舞いをします。文字のときと同じように、要素を囲む「親」となる要素に設定するようにしてくださいね。

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

なんだかうまくいかない場合・・、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の中央寄せは、実はもっと奥が深いです。興味のある方は、こちらのCSSを使った中央寄せに関するまとめた記事をぜひご覧下さい。

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

 

閉じる