- ベストアンサー
<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を中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは ＞<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>は非推奨になっています
その他の回答 (2)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 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>タグをくくる方が良いでしょうということでした。
- yambejp
- ベストアンサー率51% (3827/7415)
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>
お礼
yambejpさん ご回答、ありがとうございました。 了解しました。
補足
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; }