左揃えの文字を横幅が自動的に伸縮する中央寄せにする3つの方法

  1. acky.infoホーム
  2. デザインのヒント
  3. CSSテクニック
  4. 左揃えの文字を横幅が自動的に伸縮する中央寄せにする3つの方法

左揃えの文字を横幅が自動的に伸縮する中央寄せにする3つの方法の概要です

左揃えの文字を横幅が自動的に伸縮する中央寄せにする方法を、display: inline-block;・display: table;・display: flex;を使う3つのパターンで紹介します。
内容の幅が変わったときにCSSを調整しなくても中央寄せのままになるので、内容の変更が多いところに使うと便利です。

まとめ！

  • display: table; を使って左揃えの文字を横幅が自動的に伸縮する中央寄せがおすすめ

もくじ

広告

HTML・CSSとデモページ

HTMLコード

<p class="inline"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>
<p class="block"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>
<div class="inline-block">
	<p> あいうえお<br>
		かきくけこさしすせそ<br>
		たちつてと </p>
</div>
<p class="table"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>
<div class="flex">
	<p>あいうえお<br>
		かきくけこさしすせそ<br>
		たちつてと</p>
</div>

CSSコード

main p {
	background: #CCC;
}
.inline {
	text-align: center;
}
.block {
	width: 200px;
	margin: auto;
}
.inline-block {
	text-align: center;
}
.inline-block p {
	display: inline-block;
	text-align: left;
}
.table {
	display: table;
	margin: auto;
}
.flex {
	display: flex;
	justify-content: center;
}

デモページ・ファイルはこちら

インライン要素やブロック要素は左揃えのまま中央寄せできない

ブラウザでデモページを見る

HTML・CSSと方法

HTMLコード

<p class="inline"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>
<p class="block"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>

CSSコード

p {
	background: #CCC;
}
.inline {
	text-align: center;
}
.block {
	width: 200px;
	margin: auto;
}

左揃えの文字を横幅が自動的に伸縮する中央寄せはインライン要素やブロック要素でもできそうですが、CSSの5行目のようにインライン要素の中央寄せではすべての行が中央寄せになります。

CSSの8から9行目のようにブロック要素の中央寄せでは幅を決めて中央寄せにするので内容の幅に合わせた自動調整はされず、文字数が減ったときは右端まで余白ができ、文字数が増えたときは改行します。

display: inline-block; を使う横幅が自動的に伸縮する中央寄せ

いいところ

  • 古いInternet Explorerにも対応できる

ここがいまいち…

  • 要素を2つ使う

ブラウザでデモページを見る

HTML・CSSと方法

HTMLコード

<div class="inline-block">
	<p> あいうえお<br>
		かきくけこさしすせそ<br>
		たちつてと </p>
</div>

CSSコード

p {
	background: #CCC;
}
.inline-block {
	text-align: center;
}
.inline-block p {
	display: inline-block;
	text-align: left;
}

text-align: center; を使って中のインライン要素を中央寄せにします。

text-align: left; を使って内容を左寄せにします。

display: inline-block;を使う左揃えの文字を横幅が自動的に伸縮する中央寄せは、親要素にtext-align: center;を指定して中のインライン要素を中央寄せにしてから、インラインブロック要素に変換した要素にtext-align: left;を指定します。

インラインブロック要素を中央寄せするためには、CSSの2行目のように
text-align: center;
をインラインブロック要素を囲むブロック要素に指定すると、中のインラインブロック要素が中央寄せになります。

pを、CSSの8行目のように
display: inline-block;
と指定して、ブロック要素からインラインブロック要素に変換し、CSSの9行目のように
text-align: left;
を指定して要素の中の内容を左寄せにすると、左揃えの文字を横幅が自動的に伸縮する中央寄せができます。

いいところ

古いInternet Explorerにも対応しています。

display: inline-block;はInternet Explorer 8から対応しています。

インラインブロック要素をInternet Explorer 6と7にも対応させるときはpに
/zoom: 1;
を書きたします。

ここがいまいち…

要素を2つ使います。

divとpのように2つの要素を組み合わせるのでHTMLが少し複雑になります。

display: table; を使う横幅が自動的に伸縮する中央寄せ

いいところ

  • 1つの要素でつくれる

ここがいまいち…

  • Internet Explorer 8から対応

ブラウザでデモページを見る

HTML・CSSと方法

HTMLコード

<p class="table"> あいうえお<br>
	かきくけこさしすせそ<br>
	たちつてと </p>

CSSコード

p {
	background: #CCC;
}
.table {
	display: table;
	margin: auto;
}

margin: auto; を使って中央寄せにします。

display: table;を使う左揃えの文字を横幅が自動的に伸縮する中央寄せは、要素にdisplay: table;とmargin: auto;を指定します。

pを、CSSの5行目のように
display: table;
と指定して、ブロック要素からテーブル要素に変換し、CSSの6行目のように
margin: auto;
と指定して中央寄せにすると、左揃えの文字を横幅が自動的に伸縮する中央寄せができます。

いいところ

1つの要素でつくれます。

1つの要素だけで左揃えの文字を横幅が自動的に伸縮する中央寄せになるので少ないHTMLでつくれます。

ここがいまいち…

Internet Explorer 8から対応しています。

display: table;はInternet Explorer 8から対応しています。
Internet Explorer 6と7でも左揃えの文字を横幅が自動的に伸縮する中央寄せにするときはインラインブロック要素を使う方法でつくりましょう。

display: flex; を使う横幅が自動的に伸縮する中央寄せ

いいところ

  • なし

ここがいまいち…

  • Chrome 28・Firefox 22・Internet Explorer 11・Edgeからしか対応していない
  • 要素を2つ使う

ブラウザでデモページを見る

HTML・CSSと方法

HTMLコード

<div class="flex">
	<p>あいうえお<br>
		かきくけこさしすせそ<br>
		たちつてと</p>
</div>

CSSコード

p {
	background: #CCC;
}
.flex {
	display: flex;
	justify-content: center;
}

justify-content: center; を使って中央寄せにします。

display: flex;を使う左揃えの文字を横幅が自動的に伸縮する中央寄せは、要素にdisplay: flex;とmargin: auto;を指定します。

divを、CSSの5行目のように
display: flex;
と指定して、ブロック要素からフレックス要素に変換し、CSSの6行目のように
justify-content: center;
と指定して中央寄せにすると、左揃えの文字を横幅が自動的に伸縮する中央寄せができます。

いいところ

display: flex;はHTMLが少し複雑になるうえに新しいブラウザしか対応していないので、使うメリットはありません。
対応ブラウザが最新版だけでdisplay: table;などを使ってもうまくできないときに試してみましょう。

ここがいまいち…

flexは新しいブラウザだけ対応しています。

display: flex;は仕様が確定していないので今後CSSの書き方が変わるかもしれません。
また、flexはChrome 28・Firefox 22・Internet Explorer 11・Edgeからのように、新しいブラウザしか対応していません。

1つの要素だけのときは端まで背景色が付きます。

pだけのように1つの要素でも左揃えの文字を内容の幅に合わにせた中央寄せになりますが、背景色を使ったデザインのときは左右の端まで色が付いてしまいます。
背景色を使うときなどは、 divとpのように2つの要素を組み合わせるのでHTMLが少し複雑になります。

まとめ

左揃えの文字を横幅が自動的に伸縮する中央寄せをつくるときは、display: table;を使ってつくりましょう。
display: table;を使ってもうまくできないときはdisplay: inline-block;などほかの方法を試してください。

広告