2011年10月17日

css text-align プロパティ

スポンサード リンク

 ブロック要素の内容の水平方向の配置
text-align プロパティ

text-align: left;  左寄せ

text-align: center;  中央揃え


画像中央寄せ

text-align: right;  右寄せ

文字均等割付 text-align : justify; text-justify:distribute-all-lines;
むかしむかし、あるところに、おじいさんとおばあさんが住んでいました。
二人は子どもがいなかったので、シロというイヌをとても可愛がっていました。
ある日、シロが畑でほえました。
「ここほれワンワン、ここほれワンワン」

  ↑↑単語間の半角空白と字間を調整して両端揃えで表示 IE5以上

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<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; &nbsp;右寄せ</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;
※IE7でもセンタリングされてます。Firefoxはもちろん ×です。
本来のブロック要素の水平方向の配置は marginプロパティで設定します。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ

posted by javaScript at 22:22 | 大阪 ☁ | ボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。