ブロック要素の内容の水平方向の配置
text-align プロパティ
text-align: left; 左寄せ
text-align: center; 中央揃え
画像中央寄せ
text-align: right; 右寄せ
文字均等割付 text-align : justify; text-justify:distribute-all-lines;
むかしむかし、あるところに、おじいさんとおばあさんが住んでいました。
二人は子どもがいなかったので、シロというイヌをとても可愛がっていました。
ある日、シロが畑でほえました。
「ここほれワンワン、ここほれワンワン」
↑↑単語間の半角空白と字間を調整して両端揃えで表示 IE5以上
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<html>
<head>
<title>水平方向の位置ぞろえ text-align プロパティ</title>
<style type="text/css">
<!--
.oyaDiv0{
background-color : #fffc85;
width : 500px;
padding:10px; /* ボックス,内側の余白 */
}
.oyaDiv0 p{
background-color :#99ccff;
padding:2px; /* P要素,内側の余白 */
}
.alignL{text-align:left;} /* 左寄せ */
.alignC{text-align:center;} /* 中央揃え */
.alignR{text-align:right;} /* 右寄せ */
.alignJ{text-align:justify; /* 文字均等割付 両端揃え */
text-justify:distribute-all-lines;
/* 単語間の半角空白と字間を調整して両端揃えで表示
文字数が一行に満たない行も均等に割り付けます。IE5 以上*/
}
-->
</style>
</head>
<body>
<div class="oyaDiv0">
<p class="alignL">text-align: left; 左寄せ</p>
<p class="alignC">text-align: center; 中央揃え</p>
<p class="alignC">
<img src="koaras.jpg" width="160" height="120" border="0" id="IMG"><br>
画像中央寄せ</p>
<p class="alignR">text-align: right; 右寄せ</p>
<p class="alignJ">
文字均等割付 text-align : justify; text-justify:distribute-all-lines; <br>
むかしむかし、あるところに、おじいさんとおばあさんが住んでいました。<br>
二人は子どもがいなかったので、シロというイヌをとても可愛がっていました。<br>
ある日、シロが畑でほえました。<br>
「ここほれワンワン、ここほれワンワン」
</p>
</div>
</body>
</html>text-align プロパティ
ブロック要素(h1-h6,div,p,table,など)の内容(テキストや画像etc)の水平方向の配置を指定します。
text-align: left; 左寄せtext-align: center; 中央揃えtext-align: right; 右寄せtext-align: justify; 均等割付(行の幅が揃うように配置)
Windows IE6
text-alignプロパティはブロック要素の内容(テキストや画像etc)の水平方向の位置を設定するものですが、IE 6は 親要素に、例えば
text-align: center;を指定すると内在する横幅の指定されたブロック要素そのものが中央揃えになるというバグがあります。
<div style="border:lime 1px solid; text-align: center;">
<div style="border:red 1px solid;width:300px;text-align: left;">
外側 DIVに text-align: center;</div>
</div>
外側 DIVに text-align: center;
※IE７でもセンタリングされてます。Firefoxはもちろん ×です。
本来のブロック要素の水平方向の配置は
本来のブロック要素の水平方向の配置は
marginプロパティで設定します。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
