HTMLで中央寄せをマスター！あなたはいくつ知ってる？中央寄せのテクニックを4つ紹介

TOP
> 言語・スキル
> html
> HTMLで中央寄せをマスター！あなたはいくつ知ってる？中央寄せのテクニックを4つ紹介

1 HTMLで中央寄せ
2 text-align: center で文字を中央寄せ
3 margin: auto でブロック要素を中央寄せ
4 transformで中央寄せ
5 Flexboxで中央寄せ
6 HTML5で廃止されたタグ
7 まとめ

HTMLで中央寄せ

HTMLで、テキストや要素を中央寄せにするシーンは多々あります。
この記事では、中央寄せにするテクニックを4つ解説し、さらにHTML5で廃止されたタグなどの注意点についても解説していきます。

ちなみにHTMLは、デフォルトでは左寄せです。

text-align: center で文字を中央寄せ

まずは、 text-align: centerを使って、文字を中央寄せにする方法を解説します。
text-alignは、インライン要素を中央寄せ・右寄せ・左寄せにするためのCSSプロパティです。

<div style="text-align: center">
  HTMLで文字を中央寄せ！
</div>

HTMLで文字を中央寄せ！

</div>

■ ブラウザでの表示

text-align:centerは、CSSを指定した要素はもちろん、要素の下にある子要素や、さらにその下の要素（孫要素）にも反映されます。

<div style="text-align: center">
  HTMLで文字を中央寄せ！
  <div>
    子要素にも「text-align: center」は反映されます！
  </div>
</div>

HTMLで文字を中央寄せ！

<div>

子要素にも「text-align: center」は反映されます！

</div>

▪️ ブラウザでの表示

画像もtext-align: center で中央寄せ

画像もテキストと同じように text-align: centerで中央寄せにします。
ただし <img>タグに指定するのではなく、親のタグに対して text-align: centerを指定します。

<div style="text-align: center">
  <img src="画像ファイルのパス" />
</div>

</div>

margin: auto でブロック要素を中央寄せ

ブロック要素とは、CSSの displayプロパティが blockになっている要素を指します。
代表的なものとして、 <div>``<h1>〜<h6>``<p>``<ul>などのタグがあります。

ブロック要素は、 text-align: centerで要素自体を中央寄せにできないため、 marginなどを使って中央寄せにします。
実際にサンプルコードを見てみましょう。

<div style="width: 400px; margin: auto;">
  margin:autoで中央寄せ
</div>

margin:autoで中央寄せ

</div>

▪️ ブラウザでの表示

上の結果の通り、要素のサイズが 400pxで、残った部分の余白が margin: autoで左右に均等に配分され、中央寄せになっています。

transformで中央寄せ

少し変わった方法として、CSS3で追加された transformプロパティを使って、左右に中央寄せする例を紹介します。

次のサンプルコードのように、要素を left: 50%でページの半分の位置に移動させ、さらに translateで要素の大きさの半分戻すことにより、ページの中央に要素を配置するテクニックを使っています。

▪️ CSS

.transform-sample {
  position: relative; 
  width: 600px;
  height: 50px;
}
.center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background:#fff;
}

.transform-sample {

position: relative;

width: 600px;

height: 50px;

}

.center {

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

background:#fff;

}

Flexboxで中央寄せ

最後に、CSS3で追加されたFlexboxで、中央寄せにする方法を解説します。
FlexboxはFlexible Box Layout Moduleの略で、その意味の通り、フレキシブルにボックスレイアウトを組む為のCSSです。
Flexboxは比較的新しい機能ですが、PC・モバイルも含めて主要なブラウザの多くでサポートされ、現在では多くのWebサイトが使用しています。

では、Flexboxを使って要素を中央寄せにする例を見てみましょう。

▪️ HTML

<div class="flex">
  <div class="box">
    中央寄せ１
  </div>
  <div class="box">
    中央寄せ2
  </div>
  <div class="box">
    中央寄せ3
  </div>
</div>

中央寄せ１

</div>

中央寄せ2

</div>

中央寄せ3

</div>

▪️ CSS

.flex {
  display: flex;
  justify-content: center;
  background: yellow;
}
.box {
  background: #99f;
  padding: 40px 0;
  width: 150px;
  text-align: center;
  border: 1px solid #333;
}

.flex {

display: flex;

justify-content: center;

background: yellow;

}

.box {

background: #99f;

padding: 40px 0;

width: 150px;

text-align: center;

border: 1px solid #333;

}

▪️ ブラウザでの表示

上のサンプルコードのポイントは、CSSの justify-contentを指定しているところです。
Flexboxで水平方向の位置を揃えるときは、 justify-content: centerを指定します。
また、中央寄せ以外にも次のような値が指定できます。

flex-start（初期値）：行の開始位置から配置（左揃え）
flex-end ：行の終了位置から配置（右揃え）
left左揃え
right右揃え
center ：中央揃え
space-between ：最初のアイテムは先頭に、最後のアイテムは末尾に配置され、残りは均等に間隔空けて配置
space-around：全てのアイテムを均等配置

HTML5で廃止されたタグ

HTML5から、文字の装飾はCSSで行うことが推奨されるようになり、それに伴い次のタグや属性がHTML5の仕様から削除されました。

<center>タグ

<center>は、タグで囲まれた内容を中央寄せするタグです。中央寄せにする意外には特に機能がないため、「装飾はCSSで行うべき」という方針のもと、HTML5の仕様から <center>タグは削除されました。

【centerの使用例】

<center>
<p>文字を中央寄せするcenterタグです。</p>
<p>HTML5から削除されたタグなので、使用ないようにしましょう！<p>
</center>

<p>文字を中央寄せするcenterタグです。</p>

<p>HTML5から削除されたタグなので、使用ないようにしましょう！<p>

</center>

align属性

要素内コンテンツの、水平位置を指定する align属性も、「装飾はCSSで行うべき」という方針のもと、HTML5で削除されました。

【align属性の使用例】

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style>
    td { width: 150px; border: 1px solid #333; }
  </style>
</head>
<body>
<table>
  <tr>
    <td align="left">左寄せ</td>
    <td align="center">中央寄せ</td>
    <td align="right">右寄せ</td>
  </tr>
</table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

td { width: 150px; border: 1px solid #333; }

</style>

</head>

<body>

<table>

<tr>

</tr>

</table>

</body>

</html>

ポテパンダの一言メモ

HTML5で廃止されたタグや属性は、互換性のために多くのブラウザーで動作ますが、HTMLの仕様から削除された以上、いつブラウザで動作しなくなってもおかしくありません。
今後は利用せず、CSSで中央寄せを行いましょう。

まとめ

htmlで中央寄せにする方法を解説してきました。文字や要素の中央寄せは頻繁に使うため、是非とも覚えておきましょう。

この記事のまとめ

インライン要素の中央寄せは「text-align: center 」
ブロック要素は「margin: auto」や「Flexbox」で中央寄せ
HTML5では「center」タグ、「align」属性は廃止された

「実際にプログラミングを使えるようになりたい」方におすすめ！

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 450名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

▶︎ プログラミングを学びたい方はこちら

卒業生の多くがWebエンジニアとして活躍

転職先企業の例

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

▶︎ 卒業生インタビューはこちら

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、
気になる方はぜひスクール詳細をのぞいてくださいませ。

ポテパンキャンプの詳細はこちら >>