【HTML/CSS】文字を中央寄せする方法(具体的な例も解説)

「HTML、CSSを学習しているけど、文字を中央に寄せる方法を網羅的に知りたい。

また、中央寄せにするときと場面などを具体的に知りたい。」そう思ったことはありませんか？

この記事では、「文字を中央寄せする方法」と「文字を中央寄せする例」の2つを解説していきます。

それでは、さっそく中央寄せする方法をみていきましょう。

【HTML/CSS】文字を中央寄せする方法

文字を中央寄せする方法として、「横方向に文字を中央寄せする方法」と「縦方向に文字を中央寄せする方法」の2つをそれぞれ解説していきます。

横方向に文字を中央寄せする方法

横方向に中央寄せするときは「text-align: center;」か「margin: 0 auto;」を使います。

まずtext-alignです。

コードはたとえば以下のように書きます。

<div id="center"><p>文字を中央にします。</p></div>

#center {
  text-align: center;
}

コードを出力すると以下のようになります。

文字が真ん中に表示されているのがわかります。

※今回は文字を画面の中央に寄せる場合を想定しました。よって、centerというid名の要素のwidth(横幅)を100%にしておきました。そうすることで、画面の横幅いっぱいの要素の真ん中に文字が配置されています。

つづいて、marginを使う場合ですです。

「margin: 0 auto;」を使うことでも文字を中央寄せすることができます。

ただし、margin: 0 auto;で中央寄せできるのはブロック要素のみになります(インライン要素は中央寄せされません)。

よって、ブロック要素に使うか、「display: block;」か「display: inline-block;」とコードを書いて、インライン要素をブロック要素に変えてから使いましょう。

また、文字の要素の横幅はデフォルトだと100%になってしまっているので、横幅を指定しましょう。

コードは例えば以下のように書きます。

<p id="center">文字を中央にします。</p>

#center {
  width: 100px;
  margin: 0 auto;
}

このコードを出力すると以下のようになります。

上のように文字が真ん中にきました(指定する横幅によって行数が変わります)。

(補足)横並びされた要素を中央にそろえる方法

「display: flex;」で横並びにされた要素を「justify-content: center;」で中央揃えにすることもできます。

例えば以下の画像を見てください。

<div id="row">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

#row {
  display: flex;
}

横並びになった要素がはしっこに固まっています。

ここで、「justify-content: center;」をCSSに追加します。

#row {
  display: flex;
  justify-content: center;
}

出力してみましょう。

真ん中に寄せられました。

要素を横並びにして、かつ中央寄せすることはよくあることなので「justify-content: center;」も覚えておきましょう。

縦方向に文字を中央寄せする方法

縦方向に文字を中央寄せする方法として、「align-items: center;」と「padding」を使う場合をそれそれ説明していきます。

中央寄せしたい文字の要素の親要素のCSSに「display: flex;」と「align-items: center;」のコードを書きます。

たとえば、下のように書きます。

<div id="box"><p>縦に中央寄せします。</p></div>

#box {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  border: 1px solid black;
}

出力してみましょう。

縦方向に文字が真ん中に寄せられています。

次に、paddingを使う場合です。

コードを例えば以下のように書きます。

<div id="box"><p>縦に中央寄せします。</p></div>

#box {
  width: 150px;
  height: 150px;
  padding-top: 35px;
  border: 1px solid black;
  box-sizing: border-box;
}

出力すると以下のようになります。

※「box-sizing: border-box;」のコードを書くとpaddingで余白を入れても要素全体の大きさが保持されるようになります。

以上、縦方向に文字を真ん中にもってくる方法でした。

 文字を中央寄せする例

文字を中央寄せする例として、「見出しを中央寄せする」「ボックスの中の文を中央寄せする」の2つを見ていきます。

見出しを中央寄せする

見出しを以下のように中央寄せします。

<div id="title"><h1>見出し1です</h1></div>
<p>
  ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</p>

#title {
  width: 100%;
  text-align: center;
}

見出しを真ん中にもってくることで見やすくなり強調されます。

コードは以下の通りです。

先ほど紹介したmarginプロパティを使った方法になります。

以上、見出しの中央寄せについてでした。

ボックス(箱)の中の文を中央寄せする

続いて、ボックスの中の分を中央寄せする場面です。

縦方向に文字を真ん中にもってくるパートにもボックスが登場しましたが、このパートでは縦と横両方を中央寄せしていきます。　

下のように、箱をつくりその中に文を書きました。

<div id="Box"><p>文字を中央にします。</p></div>

#Box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
}

何もしないままだと、上のように文字がかたよってしまっています。

ここでCSSのコードを以下のように書きかえます。

#Box {
  padding-top: 65px;
  text-align: center;
}

「text-align: center;」「padding-top: 65px;」を追加しました。

コードを出力してみましょう。

箱の真ん中に文字がきました。

※box-sizing: border-box;を書いているので、paddingを指定してもボックスの大きさをそのままになっています。

以上、箱の中の文字を真ん中にもってくる方法でした。

まとめ

いかがでしたか？

文字の中央寄せに関して理解が深まったことでしょう。

今回の記事では、文字を中央に揃える方法と、文字を中央寄せする具体的な例について説明してきました。

今回の知識をもとに実際にコードを書いてみてください。

この記事の説明が役に立てば幸いです。