<img>タグにCSSのclass設定可能?
<img>タグにスタイルシートのclassは、直接設定できるのでしょうか?
例えば,以下のようにテーブルの中にexample.jpgという画像があるとします。
<table border="4" width="250">
<tr>
<td align="left">
<img src="example.jpg" width="100" height="100" borde="0">
</td>
</tr>
</table>
この場合、<td align="left">とあるのでexample.jpgはセルの中で左揃えになって表示されます。
質問1:
ここで、スタイルシート使用して、<td align="left">のまま、example.jpgをセルの中で中央揃えにして表示したいとします。また、スタイルシートを使用して、example.jpgの上下には10pxのマージンを設定します(ここでは、スタイルシートに関する質問のため、あえてhspaceは<img>タグに使用しません。)。スタイルシートの指定は、<head></head>内で行なうことにします。
この場合、以下のように<img>タグの中に直接classを設定できますか?できない場合は、その理由、正しいやり方等をお教え下さい。
<head>
<style type="text/css">
.abc{
text-align:center;
margin-top:10px;
margin-bottom:10px:
}
</style>
</head>
<table border="4" width="250">
<tr>
<td align="left">
<img class="abc" src="example.jpg" width="100" height="100" borde="0">
</td>
</tr>
</table>
やはり、<div></div>で<img>タグを囲んで、
<head>
<style type="text/css">
.abc{
text-align:center;
margin-top:10px;
margin-bottom:10px:
}
</style>
</head>
<table border="4" width="250">
<tr>
<td align="left">
<div class="abc">
<img src="example.jpg" width="100" height="100" borde="0">
</div>
</td>
</tr>
</table>
などとするしか方法がないのでしょうか?
質問2:
また、スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか?
よろしくお願いします。
お礼
body { text-align: left; } をcenterにしても中央寄せにならずに、丸1日いろいろやってましたが、教えていただきましたとおり、#container に 「margin: 0 auto;」を記述しましたところ、中央寄せになりました。 助かりました、本当にありがとうございました。