HTML/CSS
中央揃え
真ん中

htmlで文字や画像を真ん中に寄せる方法を解説【CSSで設定】

2021/07/12

( 更新日：2022/04/19 )

Webページを作成する際、文字や画像を画面の真ん中に寄せる機会は多いと思います。なぜなら、文字や画像は画面の真ん中にあった方が見やすいからです。そのため、強調したい内容や見出しは真ん中に寄せることが多いです。

HTMLでは配置を設定しなければ要素は左寄せになります。そのため、設定なしの状態では画面左端に寄り、ユーザーが見にくいページとなります。見にくいサイトだとページを最後まで見てもらえず、購入の機会を失うことになりかねません。

本記事では画面の中央に文字や画像を配置するための方法について解説します。

htmlで真ん中に寄せる方法

CSSで設定する

HTMLで表示された文字や画像を中央揃えするためにはCSSで設定します。CSSを設定するには以下の2通りの方法があります。

HTMLファイルの<head>部分に直接書き込む
外部ファイルに書き込む

ページが小さい場合には<head>に直接書き込むことが管理が楽です。しかし、ページが大きくなるにつれてコードが長くなるため、外部ファイルに書くことをおすすめします。長すぎるとコード量が多くなり、どこに何が書いてあるか分かりにくくなるためです。

コードはできる限り見やすい方が良いです。コードのバランスに応じて書き場所を決めることをおすすめします。それでは具体的なコードの書き方を解説します。

text-alignを使う

真ん中に寄せるためにはtext-alignというプロパティを使います。text-alignは文字や画像を揃えるためのプロパティです。真ん中に寄せるためにはcenterという値を入れます。コードは以下の通りです。

text-align: center;

text-alignは指定したタグの中の要素に対して、真ん中に寄せる処理です。つまり、指定した要素が真ん中に寄せられていなくて、幅が決まっていれば画面の中央には来ないので気を付けてください。

marginを使う

二つ目の方法はmarginを使います。marginはブロック要素の余白を指定するためのプロパティです。通常は数値を値として、余白の大きさを指定します。さらに、値にautoを使えば、余白を適切に指定してくれます。

真ん中に寄せるときにはautoを指定します。真ん中に揃えるためのコードは以下の通りです。

margin: 0 auto;

上記のコードは上下の余白を0として、左右に同じ余白を設定するためにautoとします。本コードでは指定した要素が親要素の余白の中央によるようになります。しかし、指定した要素の中の文字や画像は真ん中に寄りません。その場合は、text-align:center;で指定します。

htmlで真ん中に寄せるときの注意点

ブロックの位置や幅によって決まる

text-alignは指定した要素の幅によって、真ん中の場所が決まります。例えば、下の要素を考えてみます。

<div>
  <p>真ん中に寄せます</p>
</div>

ここで、divの幅を50%としたときに、pをtext-align:centerとします。すると、画面の左から1/4のところに文字が出ます。つまり、画面の真ん中に文字が揃いません。なぜなら、divタグによってpタグの幅が左から50%までのところまでしか幅がありません。

つまり、pタグの中央とは画面の1/4のところになります。つまり、タグの幅によって中央の位置が変わります。つまり、文字を画面の真ん中に持っていきたい場合には、親要素を含む上位要素も真ん中に寄っている必要があります。

margin:0 auto;でも同様のことが言えます。指定した要素は親要素の中央に寄ることになります。つまり、画面の中央に寄せる場合は上位要素も画面中央に寄っている必要があります。

要素の構造に気を付ける

真ん中に寄せるときには要素の構造に気を付ける必要があります。なぜなら、ブロックの位置や幅によって寄せられる位置が決まるため、親要素がどの場所にあるかが大切だからです。もし、ある要素が左寄せで、次の要素が右寄せにしたい場合はこの二つの要素は兄弟要素である必要があります。

親子関係にしてしまうと、レイアウトが崩れてしまいます。そのため、要素の構造にも気を付ける必要があります。気を付けるためには、一度手書きのレイアウトを作って、どの要素をどこに割り当てるかを決めておくことをおすすめします。

インライン要素には使えない

インライン要素はtext-alignでもmarginでも真ん中に寄せることができません。なぜなら、インライン要素は要素内の文書として認識されるため、幅や余白を持ちません。一方、text-alignもmarginも幅や余白から真ん中に寄せるため、インライン要素では真ん中に寄せれません。

インライン要素を真ん中に寄せるためには、要素をインライン要素の親要素にtext-align:centerを設定するか、displayプロパティを使ってインラインブロックとする。インライン要素に幅などを設定できるようにブロックの要素を付けたものです。インラインブロックにするためのコードは以下の通りです。