スタイルシート:センタリング StyleSheet web design

スタイルシート:センタリング

 サンプルプレビュー
センタリング
スタイルシートによるセンタリングです。このボックスのスタイルシートのプロパティはmarginです。必ずwidthプロパティも一所に記述します。
 コード
スタイルシート部分 
.cent    { text-align:center }
.c1      { margin:10px auto;
           text-align: left;
           width:200px;
           border:1px solid #999;
           background-color:#eee
         }
.c-box   { padding:15px }
.c-title { font-weight: bold; }
.c-moji  { line-height: 140%;padding: 5px 0px }
html部分 

<div class="cent">
 <div class="c1">
  <div class="c-box">
   <div class="c-title">センタリング</div>
   <div class="c-moji">スタイルシートよる〜</div>
  </div>
 </div>
</div>
 解説
センタリング
スタイルシートによるセンタリングです。このボックスのスタイルシートのプロパティはmarginです。必ずwidthプロパティも一所に記述します。
赤枠c1は外枠よりセンターに位置(margin:autoにより)
赤枠はc1とc-boxが同じボックスとなり(widthが200px)
青枠は赤枠のc-boxよりpadding:15pxになっています
※margin:autoを使う場合は必ずwidthプロパティを入れる ※IEはmargin:autoでセンタリング出来ない為、その外枠にボックス(cent)を作りtext-align:centerを入れ、c1にはtext-align:leftを入れる

※paddingやmarginのleft,rightとwidthを一所に入れない事。c1にwidthプロパティを使う為その内側にボックス(c-box)を作りpaddingを入れて入れ子にする(IE5などの対策)
※私個人として、NN4とかIE4.5(Mac)、それ以前のブラウザはホームページでの対応させる事をあきらめました。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95％と言われております)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
｜   Link  ｜   Profile  ｜   Sitemap  ｜