☆☆ 新着記事 ☆☆

2018年6月23日土曜日

CSS : テーブル装飾<テーブル内のテキスト 中央寄せ>


◆<td><th>のサイズ指定
 <td width="200" height="100"></td>
  ピクセル数またはパーセント
 *HTML 4.01では非推奨


◆テーブル内の文字の大きさを指定

<table cellpadding="15" border="3" style="font-size:10px">

◆Text位置の調整
センタリングしたいものがインライン要素の場合は text-align を用います。

<td align="left"> 左寄せ。</td>

. <div style="text-align:center;"> <span>あああ</span> </div>. センタリングしたいものがブロック要素の場合は、センタリングしたい要素自体に margin: 0 auto; を指定します。

センタリングしたいものがブロック要素の場合は、センタリングしたい要素自体に margin: 0 auto; を指定します。左右のマージンを自動配分することでセンタリングを実現します。Internet Explorer の場合は、text-align でもブロック要素がセンタリングされることがありますが、これは Internet Explorer のバグです。センタリングに関してはブラウザやモードによって差異があるので注意しましょう。

<style type="text/css">
<!--
.center {
  text-align: center;
}
.center * { margin-right: auto; margin-left: auto; }
-->
</style>

<div class="center">
  ...
</div>

<div style="text-align=center">文字文字文字</div> <- 効かない

<div align="center">中央寄せしたい文字</div>

<p style="text-align: center">テスト・テスト</p> <-これは効いた!!


pタグの親要素(例えばdiv)で、text-align:centerを指定しても、p全体は中央配置にならない。
なぜなら、pタグなどのdisplay: blockの要素に対しては、text-alignは適用されない仕様となっているからです。これはCSSのルールです。
◆CSSでの記述

<div class="container">
  1行のテキストで縦の中央寄せ。
</div>

<style> .container{

line-height:200px; text-align:center; background-color:#fff2fa; }
</style>

0 件のコメント:

コメントを投稿