Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

text-align

インラインレベル要素などのインラインコンテンツを文字寄せしたい場合の位置を指定します。

サンプルコード

p.test { text-align: left;}
p.test1 { text-align: right;}
p.test2 { text-align: center;}

指定可能な値一覧

値	概要
start	日本語や英語などの左から右方向へ読み進める言語なら『left』、右から左方向へと読み進める言語なら『right』と指定した場合と同じレンダリングとなります。この『start』が初期値です。
left	文字寄せを左寄せとします。
right	文字寄せを右寄せとします。
center	文字寄せを中央寄せとします。

ブラウザでの表示結果

<p style="border: solid 1px black; text-align: left;">ここはp要素です。</p>

<p style="border: solid 1px black; text-align: right;">ここはp要素です。</p>

<p style="border: solid 1px black; text-align: center;">ここはp要素です。</p>

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

概要

インラインレベル要素などのインラインコンテンツを文字寄せしたい場合の位置を指定します。

文字寄せ位置の指定が可能なのはインラインレベル要素(span要素やimg要素等)などのインラインコンテンツのみとなりますのでご注意ください。ブロックレベル要素やtable要素などの位置寄せを行いたい、といった場合には『margin』プロパティを使用して下さい。

<div style="border: solid 1px black; text-align: center;">
	<p style="background-color: yellow; width: 300px; margin: 0;">ここは横幅300pxと指定しているp要素です。親のdiv要素に『text-align: center』と指定していますが、このp要素はブロックレベル要素なので中央寄せとなりません。ただし、p要素の中にいるこの文章はインラインコンテンツなので中央寄せで表示されます。</p>
</div>

<div style="border: solid 1px black;">
	<p style="background-color: yellow; width: 300px; margin: 0 auto;">ここは横幅300pxと指定しているp要素です。p要素に『margin: 0 auto;』と指定して中央寄せにしています。</p>
</div>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

WebProgrammingPortalウェブプログラミングポータル