スタイルシートでの左・右・中央寄せ
スタイルシートでの左・右・中央寄せ

.
文字
<div style="text-align:left;">
文字を
左に寄せる
</div>
				
<div style="text-align:center;">
文字を
真中に寄せる
</div>
				
top close home(geo) home(goo)
画像
画像を左に寄せる
<div style="text-align:left;">
<img src="url" alt="画像" style="border:none;width:**px;height:**px;">
</div">		
画像
<img src="url" alt="画像" style="border:none;width:**px;height:**px;
float:left;">
<br style="clear:left;">
画像
画像の右に文字等を回り込ませる

<br style="clear:left;">
↑これによって画像を左に寄せたのを解除

以降の文字は回りこみを解除されました
画像を右に寄せる
<div style="text-align:right;">
<img src="url" alt="画像" style="border:none;width:**px;height:**px;">
</div">		
<img src="url" alt="画像" style="border:none;width:**px;height:**px;
float:right;">
<br style="clear:left;">
画像を真中に寄せる
<div style="text-align:cener;">
<img src="url" alt="画像" style="border:none;width:**px;height:**px;">
</div">
画像
top close home(geo) home(goo)
ボックス
ボックスを左に寄せる
<div style="width:200px;height:100px;float:left;">
	ボックス
</div>
<br style="clear:left;">
ボックス
ボックスの右に文字等を回り込ませる

<br style="clear:left;">
↑これによってボックスを左に寄せたのを解除 

以降の文字は回りこみを解除されました
表を左に寄せる
<table style="width:200px;height:100px;float:left;">
	<tr>
		<td style="border:gray solid 1px;">
			テーブル
		</td>
		<td style="border:gray solid 1px;">
			テーブル
		</td>
	</tr>
</table>
<br style="clear:left;">
テーブル テーブル
表の右に文字等を回り込ませる

<br style="clear:left;">
↑これによって表を左に寄せたのを解除

以降の文字は回りこみを解除されました
ボックスを右に寄せる
<div style="width:200px;height:100px;float:right;">
	ボックス
</div>
<br style="clear:right;">
ボックス
ボックスの左に文字等を回り込ませる

<br style="clear:right;">
↑これによってボックスを右に寄せたのを解除

以降の文字は回りこみを解除されました
表を右に寄せる
<table style="width:200px;height:100px;float:right;">
	<tr>
		<td style="border:gray solid 1px;">
			テーブル
		</td>
		<td style="border:gray solid 1px;">
			テーブル
		</td>
	</tr>
</table>
<br style="clear:right;">
テーブル テーブル
表の左に文字等を回り込ませる

<br style="clear:right;">
↑これによって表を右に寄せたのを解除

以降の文字は回りこみを解除されました
table等のボックス要素のセンタリング
↑ win IEは左に寄って他のブラウザはセンタリングされている
青字部分を指定する事によって win IE以外のブラウザはセンタリングできる
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td><td>
</tr>
</table>	
↑ 他のブラウザは左に寄って win IEはセンタリングされている
青字部分を指定する事によって win IEはセンタリングできる
<div style="text-align:center;">
<table>
<tr>
<td><td>
</tr>
</table>
</div>
			
↑ どのブラウザでもセンタリングされている
青字部分を指定する事によって どのブラウザでもセンタリングできる
<div style="text-align:center;">
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td><td>
</tr>
</table>
</div>
			
!DOCTYPE HTML PUBLIC の宣言により相違

廃止予定非推奨タグを使用している時

その1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ボックスや文字を<div style="text-align:center;">で囲み
尚且つボックス要素に margin:0px auto; を指定
<div style="text-align:center;">
<div style="width:468px;height:60px;border:blue double 3px;margin:0px auto;">
</div>
</div>

その2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ボックス要素に margin:0px auto; を指定
<div style="width:468px;height:60px;border:blue double 3px;margin:0px auto;">
</div>

廃止予定非推奨タグを使用しないとき

その1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
ボックス要素に margin:0px auto; を指定
<div style="width:468px;height:60px;border:blue double 3px;margin:0px auto;">
</div>

その2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ボックス要素に margin:0px auto; を指定
<div style="width:468px;height:60px;border:blue double 3px;margin:0px auto;">
</div>
pre top home(geo) home(goo) close