text-align/文字・画像の水平位置

説明

　text-alignプロパティを使うと行揃えを設定出来、ボックス中の文字や画像が配置される水平位置を変える事が出来ます。

構文

　text-alignプロパティの構文は以下の通りです。

text-align: 行揃え;

　行揃えは以下の設定が出来ます。

　両端揃えは左寄せと似ていますが、左寄せは単に1行に記述出来る文字数が残り3文字で次の単語が5文字の場合は、折り返して3文字分は空いてしまいます。

　両端揃えでは、3文字分空かないように1行内での間隔を自動調整します。

　英字の場合は単語間がスペースで区切られる為、この違いが明確に出ますが、日本語では続けて記述される事が多いため、余り違いが出ません。

利用例

　text-alignの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

p {
text-align: left;
}

<p>leftを指定しています。</p>

　上記を表示すると以下になります。

　次はcenterを指定した時の表示例です。

　次はrightを指定した場合の表示例です。

　次はjustifyを指定した場合の表示例です。分かり易いように横幅を200pxに指定しています。

　因みにleftを指定すると以下になります。見ている環境によって分かりにくい場合もあると思いますが、両端揃えと比較すると左寄せでは右端まで文字が詰まっていません。

　画像に使った時の例です。

div {
text-align: center;
}

<div><img src="test.png" alt="test" /></div>

　上記を表示すると以下のように画像がセンタリングされます。

関連ページ

・ホームページ作成「画像の挿入」

　画像のセンタリングをtext-alignだけでなく、他の方法でも説明しています。又、画像形式や様々な表示方法について説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る