プロが教えるわが家の防犯対策術！

<img>タグにCSSのclass設定可能？

解決済

  • 質問者：kitty1000
  • 質問日時：
  • 回答数：3件

<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を中央揃えにする方法はあるのでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： leap_day
  • 回答日時：

こんにちは



＞<img>タグの中に直接classを設定できますか？
できますが、text-align:center;は効きません
これはブロック要素にしか効かないのでインライン要素である<img>では使えません
理由はインライン要素の場合widthがその内容分しかないため動かそうと思っても横に自由がないからです

＞<div></div>で<img>タグを囲んで
text-align:center;を使うのであればこういった方法しかないと思います

＞方法がないのでしょうか？
<img>を強制的にブロック要素にして中央表示することはできます

img {
display:block;
width:100px;
height:100px;
border:none;
margin:10px auto;
}

>スタイルシートを使用せずに、上記のテーブルで<td align="left">のままexample.jpgを中央揃えにする方法はあるのでしょうか？
<div align="center">
<img >
</div>

とか

<center>
<img>
</center>
とすればできますが、align属性、<center>は非推奨になっています

この回答への補足

leap_dayさん
ご回答ありがとうございました。

><img>を強制的にブロック要素にして中央表示することはできます
>img {
>display:block;
>width:100px;
>height:100px;
>border:none;
>margin:10px auto;
>}

上記の場合、以下のようにスタイルシートにtext-align:center;を含める必要はないのでしょうか？
img {
text-align:center;
display:block;
width:100px;
height:100px;
border:none;
margin:10px auto;
}

補足日時：2008/02/25 16:08
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： leap_day
  • 回答日時：

こんにちは



margin:10px auto;で
margin:(上下のmargin) (左右のmargin); という風に設定しているので要らないといえば要らないですけど・・・

margin:auto;が効かないときのためにtext-align:center;でも中央表示できるように入れてるのですが、自分の試した中では効かなかったことあまりないので試したこと無いブラウザでmargin:auto;が効かないものもあるかもしれませんね（－－；）
ですのでmargin:auto;が効かなかった時用に保険として入れておいたほうがいいかもしれませんね（＾＾）

※ページ頭につけるDTD宣言（<!DOCTYPE ～>をつけていないとIEではmarginは効かないことはありますけど）

この回答への補足

leap_dayさん
ご回答、ありがとうございました。

下記URLでもお聞きしていますが、
http://oshiete1.goo.ne.jp/qa3808740.html

<td align="left"></td>内の<img>
タグをセンタリングするには、やはり、<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>
などとするほうが、下記の<img>タグをdisplay:block;でブロックレベル要素化する方法よりもよいのでしょうか？

<html>
<head>
<style type="text/css">
.abc{
display:block;
text-align:center;
margin:auto;
width:100px;
height:100px;
border:0px;
}
</style>
</head>
<body>
<table border="4" width="250">
<tr>
<td align="left">
<img class="abc" src="example.jpg">
</td>
</tr>
</table>
</body>
</html>
どのように思われます？

何かお勧めの方法があれば、お教え下さい。

ちなみにyambejp（回答者さん）さんは、<div></div>で<img>タグをくくる方が良いでしょうということでした。

補足日時：2008/02/25 20:58
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

ieのためにtext-align:center;をしておくのもよくやりますね。



<html>
<head>
<style type="text/css">
.abc{
display:block;
text-align:center;
margin:auto;
width:100px;
height:100px;
border:0px;
}
</style>
</head>
<body>
<table border="4" width="250">
<tr>
<td align="left">
<img class="abc" src="example.jpg">
</td>
</tr>
</table>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejpさん
ご回答、ありがとうございました。

了解しました。

通報する
お礼日時：2008/02/25 16:14

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報