CSSでロゴ画像をセンターに配置(中央寄せ)する7つの方法

CSSでロゴ画像をセンターに配置(中央寄せ)する方法を7つ紹介しながら、それぞれの方法についての感想を書きました。

HTMLマークアップ

今回の例では、すべて下記のようにマークアップしたHTMLにCSSを当てています。

ロゴ

「ちょっとまって、クラス名もオシャレじゃないし、ロゴをh1タグで囲うのはHTML文書的に疑問を感じるんだけど」と思う人とは、喧嘩になるかもしれませんし、仲良くご飯を食べられるかもしれません。といったノリの記事です。最後までお付き合いください。

CSSでロゴ画像をセンターに配置(中央寄せ)する7つの方法

1. text-alignを使ったセンタリング

1つ目はtext-align: center;を使った方法です。

ロゴ

.logo {
	text-align: center;
}

a要素もimg要素もインライン要素ですから、text-alignのプロパティで行揃えの位置を指定できます。

この方法は、一般的な方法だと言えるでしょう。基本です。

2. marginを使ったセンタリング

2つ目はmarginを使った方法です。

ロゴ

.logo {
	width: 100px;
	margin: 0 auto;
}

.logoはブロックレベル要素ですから、要素の幅を明示したうえで、margin: 0 auto;を指定すればセンタリングされます。

この方法も、一般的な方法だと言えるでしょう。これも基本です。ありです。

3. positionとmarginを使ったセンタリング

3つ目はpositionmarginを使った方法です。

ロゴ

.logo {
	width: 100px;
	position: relative;
	left: 50%;
	margin: 0 0 0 -50px;
}

まず、left: 50%;.logoを左から50%の位置に移動させます。
次に、margin: 0 0 0 -50px;.logoを左にずらします。
marginに指定した値は.logoに明示した幅の値を2で割った値をマイナスにしたものです。

この方法も、一般的な方法だと言えますが、それは中~上級者に限ったことです。 そもそも、ロゴ画像の幅を調べる必要がありますし、ロゴ画像の幅が変わるたびに、CSSの値を修正しなければなりません。 その手間を知りながらも、使うべきシーンはきっとあるでしょう。この方法を覚えておいて損はありません。

4. positionとfloatを使ったセンタリング

4つ目はpositionfloatを使った方法です。

ロゴ

.logoBox {
	overflow: hidden;
}

.logo {
	position: relative;
	left: 50%;
	float: left;
}

.logo a {
	position: relative;
	left: -50%;
}

まず、left: 50%;.logoを左から50%の位置に移動させます。
次に、float: left;.logoの幅を縮めてから、.logo aleft: -50%;で左にずらします。

このとき.logoに幅が指定されていると、うまくセンタリングできないので注意が必要です。また、overflow: hidden;を追加するなどし、しっかりとfloatによる問題を解消しておくことも大切です。

幅を明示せずに非置換要素をフロートした場合、その幅は内容に応じて可能な限り小さく縮むのですが、詳しくは非置換要素の幅を明示せずにフロート · terkel.jpを参照ください。

この方法が一般的かどうかはさておき、ムズムズします。幅を明示せずに非置換要素をフロートするまでは個人的にセーフですが、さらにその中身を左にずらすなど、正気を疑います。この方法を覚えていて得する人は、何らかのCMSのデザインテンプレートを作っている人ぐらいです。

5. positionとfloatとtransformを使ったセンタリング

5つ目はpositionfloattransformを使った方法です。

ロゴ

.logoBox {
	overflow: hidden;
}

.logo {
	position: relative;
	left: 50%;
	float: left;
	transform: translateX(-50%);
}

まず、left: 50%;.logoを左から50%の位置に移動させます。
次に、float: left;.logoの幅を縮めてから、transform: translateX(-50%);で左にずらします。

この方法が一般的かどうかはさておき、スマートで好きです。4つ目の方法のように、中身をずらすのではなく、CSS3のプロパティ(transform)を使って自身を左にずらしています。なんだか洒落たやり方なので、ぜひ覚えておきましょう。あまりにも便利すぎて、これ以外の方法は忘れてしまうかもしれません。

6. display: flexを使ったセンタリング

6つ目はdisplay: flex;を使った方法です。

ロゴ

.logo {
	display: flex;
	justify-content: center;
}

.logodisplay: flex;を指定し、flexアイテムになったa要素をjustify-content: center;で水平方向の中央に配置します。

こんなやり方をするのは、よほどflexプロパティが好きな人か、都会のイケメンだと思います。何一つ間違った方法ではありませんが、なんだか気取りすぎです。都会のイケメンにだけ許される書き方だと思っておくのが無難でしょう。「え、時代はflexでしょ(笑)」なんて言われた日には、食が進みます。

7. display: tableを使ったセンタリング

7つ目はdisplay: table;を使った方法です。

ロゴ

.logo {
	display: table;
	width: 100%;
	text-align: center;
}

/* 上記をより丁寧に書いたものが、下記

.logo {
	display: table;
	width: 100%;
}

.logo a {
	display: table-cell;
	text-align: center;
}

*/

.logodisplay: table;を指定し、text-align: center;でセル内の行揃えを指定します。

これは、苦肉の策です。「できればもっと別の方法でやりたかったんだけど…」というセリフが聞こえてきそうです。

最後に

今回の例はいかがでしたか?

このページで挙げた7つの方法のほかにも、ロゴ画像をセンタリングする方法があるかもしれません。ですが、この7つの方法を応用していない別の方法を思いつく人は、変態だと思います。

「幅を明示していない要素をfloatすると幅が縮む」点について、今一つイメージできない方は、CSSで横並びナビゲーション・メニューをデザインする例を隅々まで読んでみてください。

参考:
非置換要素の幅を明示せずにフロート · terkel.jp