CSS 文字を左寄せ/右寄せにするサンプル(text-align)

CSSの文字を左寄せ/右寄せにするサンプルです。
text-alignプロパティを使用します。

text-align プロパティ

text-align : 値
説明
left 左寄せにします。
right 右寄せにします。
center 中央に寄せます。
justify 両端揃えになります。
値を継承する

コード

text-alignのサンプルのコードです。
16行目は、20行目のjustifyとの比較用のためleftを指定をしています。

<style>
#box1{
	background-color:LightCyan;
	text-align:left;
}
#box2{
	background-color:Cornsilk;
	text-align:right;
}
#box3{
	background-color:LightCyan;
	text-align:center;
}
#box4{
	background-color:Cornsilk;
	text-align:left;
}
#box5{
	background-color:LightCyan;
	text-align:justify;
}
#d1 div{border:1px solid #000;width:200px;margin-bottom:10px;}
</style>
<body >
<div id="d1">
<div id="box1">左寄せ</div>
<div id="box2">右寄せ</div>
<div id="box3">中央寄せ</div>
<div id="box4">あいうえお あいうえお あいうえお あいうえお</div>
<div id="box5">あいうえお あいうえお あいうえお あいうえお</div>
</div>
</body>

上記コードのサンプルです。

左寄せ
右寄せ
中央寄せ
あいうえお あいうえお あいうえお あいうえお
あいうえお あいうえお あいうえお あいうえお

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字の垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)




△上に戻る