インライン要素を左寄せ・中央寄せ・右寄せする方法

  1. acky.infoホーム
  2. デザインのヒント
  3. CSSテクニック
  4. インライン要素を左寄せ・中央寄せ・右寄せする方法

インライン要素を左寄せ・中央寄せ・右寄せする方法の概要です

文字や画像 などのインライン要素を左寄せ・中央寄せ・右寄せするときは、インライン要素を囲んでいるdivpliなどのブロック要素にtext-alignを指定します。
はじめからHTMLは左寄せなので、中央寄せや右寄せする箇所にtext-align: center;text-align: right;を使い、左寄せに戻したいときにtext-align: left;を使います。

まとめ!

  • 左寄せは、インライン要素を囲むブロック要素にtext-align: left;
  • 中央寄せは、インライン要素を囲むブロック要素にtext-align: center;
  • 右寄せは、インライン要素を囲むブロック要素にtext-align: right;
広告

HTML・CSSとデモページ

HTMLコード

<p class="left">左寄せは<br>text-align:left;</p>
<p class="center">中央寄せは<br>text-align:center;</p>
<p class="right">右寄せは<br>text-align:right;</p>

CSSコード

.left{
	text-align: left;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}

インライン要素の左寄せ

HTML・CSSと方法

HTMLコード

<p class="left">左寄せは<br>text-align:left;</p>

CSSコード

.left{
	text-align: left;
}

左寄せはブロック要素に text-align: left; を指定します。

インライン要素の左寄せは、インライン要素を囲むブロック要素にtext-alignを指定します。

インライン要素を左寄せするためには、CSSの2行目のように
text-align: left;
をインライン要素を囲むブロック要素に指定すると、中のインライン要素が左寄せになります。
※HTMLは、はじめから左寄せなのであまり使いません。

インライン要素の中央寄せ

HTML・CSSと方法

HTMLコード

<p class="center">中央寄せは<br>text-align:center;</p>

CSSコード

.center{
	text-align: center;
}

中央寄せはブロック要素に text-align:center; を指定します。

インライン要素の中央寄せは、インライン要素を囲むブロック要素にtext-alignを指定します。

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

インライン要素の右寄せ

HTML・CSSと方法

HTMLコード

<p class="right">右寄せは<br>text-align:right;</p>

CSSコード

.right{
	text-align: right;
}

右寄せはブロック要素に text-align: right; を指定します。

インライン要素の右寄せは、インライン要素を囲むブロック要素にtext-alignを指定します。

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

まちがった使い方

インライン要素に指定しても寄せることはできません。

インライン要素を囲むブロック要素にtext-alignを指定しましょう。
インライン要素にimg {text-align: right;}と指定しても右寄せにはなりません。

まとめ

text-align:は文字や画像だけでなく、display: inline-block;でインライン要素に変換したリストタグを中央寄せにするときにも使えます。
寄せる方向の指定も英語のままなので直感的です。

最後まで読んでいただき、ありがとうございました。

広告
最新のEdge、Internet Explorer、Firefox、Chromeできれいにページを見ることができます。