|
| ■ ブロック要素自身をセンタリングする場合 |
| margin プロパティを使用します。 |
 ソース |
<div style="text-align : center ; ">
<table style="margin-left : auto ; margin-right : auto ; text-align : left ; width : 400 ; " border="1">
<tr><td>
ブロック要素自身のセンタリング
</td></tr>
</table>
</div>
|
|
 表 示 |
|
別ウィンドウで表示します。
|
|
| ブロック要素において、center要素や、align属性の代替指定は、marginプロパティに 『 auto 』 と 『 0 』 の値を組み合わせて指定すれば良いのですが、IE6.0を含む以前のブラウザでは、marginプロパティが正しく実装されていません。（下記ソース参照） |
| ソース |
<table style="margin-left : auto ; margin-right : auto ; width : 400 ; " border="1">
<tr><td>
ブロック要素自身のセンタリング
</td></tr>
</table>
|
|
| 表 示 |
|
別ウィンドウで表示します。
|
| ※IE6.0を含む以前のブラウザでは指定は無視されます。 |
|
| そこで、親要素を設けて、text-align プロパティで指定します。 |
|
本来、taxt-align プロパティは、インライン要素の水平方向をコントロールするプロパティなのですが、ブロック要素自身の水平方向の位置を指定する事も可能です。
|
| ソース |
<div style="text-align : center ; ">
<table style="margin-left : auto ; margin-right : auto ; width : 400 ; " border="1">
<tr><td>
ブロック要素自身のセンタリング
</td></tr>
</table>
</div>
|
|
| 表 示 |
|
別ウィンドウで表示します。
|
|
| また、インライン内容も一緒に指定した水平方向へ移動してしまうブラウザも一部ありますので、子要素の table 要素に、text-align : left を指定しておきます。 |
| ソース |
<div style="text-align : center ; ">
<table style="margin-left : auto ; margin-right : auto ; text-align : left ; width : 400 ; " border="1">
<tr><td>
ブロック要素自身のセンタリング
</td></tr>
</table>
</div>
|
|
| 表 示 |
|
別ウィンドウで表示します。
|
|
|
|
|
|
|
インライン要素 span
center要素 スタイルシートで代替指定