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

文字

<div style="text-align:left;">
文字を
左に寄せる
</div>

<div style="text-align:right;">
文字を
右に寄せる
</div>

<div style="text-align:center;">
文字を
真中に寄せる
</div>

画像

画像を左に寄せる

<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;">

画像の左に文字等を回り込ませる

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

以降の文字は回りこみを解除されました

画像を真中に寄せる

<div style="text-align:cener;">
<img src="url" alt="画像" style="border:none;width:**px;height:**px;">
</div">

ボックス

ボックスを左に寄せる

<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>
</div>

その2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ボックス要素に margin:0px auto; を指定

</div>

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

その1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

ボックス要素に 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>