- 締切済み
imgタグでalignのrightとbottomの同時設定
imgタグでalignのrightとbottomの同時設定 例えば次のようなソースを書いてみました。 <p>AAA <img src="sakura.jpg" align="right" align="bottom"> BBB</p> しかし、これでは文字がtopに来てしまいます。 その他にalign="right:bottom"とかalign="right bottom"とか やってみましたけどダメでした。 alignでrightとbottomを実現させるにはどうしたらいいですか。
- HTML
- 回答数1
- ありがとう数17
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- edomin7777
- ベストアンサー率40% (711/1750)
align="right" valign="bottom" では？
関連するQ&A
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- <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を中央揃えにする方法はあるのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- img の align 属性を css に変更したいが、位置がずれる
img タグで、align 属性 top, middle, bottom を使用して 文章中の図の位置を調整していました。 CSS での位置表示に変更しようと思い、 align="..." を class="..." に変更し、CSS で img.top {vertical-align: top;} img.middle {vertical-align: middle;} img.bottom {vertical-align: bottom;} と設定しましたが、alignで設定していたときと位置がずれます。 解決法について探しているのですが、以下のような説明しか見つからず、 わかりません。 ■top 上端に合わせます。 ■middle 中央に合わせます。 ■bottom 下端に合わせます。 http://www.tagindex.com/stylesheet/img/vertical_align.html 解決法をお分かりの方、どうか教えてください。
- ベストアンサー
- HTML
- pタグとimgタグについて
【やりたいこと】 手順1．pタグによる文章 imgタグによる解説画像 手順2．pタグによる文章 imgタグによる解説画像 つまり、各手順に対しての解説画像をはっていこうと考えています。 【タグ】 <p>手順1．「メニューを選択」→「ファイルを保存」<img src="説明画像"></p> <p>手順2．「保存場所の選択」<img src="説明画像2"></p> として組んでいます。 【得られる結果】 手順1．「メニューを選択」→「ファイルを保存」 説明画像1 手順2．「保存場所の選択」 説明画像2 と当然、横並びになります。 画像の横にテキストを配置とかできるのわかるのですが、 【求める結果】 手順1．「メニューを選択」→「ファイルを保存」 説明画像1 手順2．「保存場所の選択」 説明画像2 という形に持っていきたいのです。 【変更後のHTML】 <p>手順1．「メニューを選択」→「ファイルを保存」</p> <p><img src="説明画像"></p> <p>手順2．「保存場所の選択」></p> <p><img src="説明画像2"></p> と組むのがいいのでしょうか？ imgのcssのvertical-alignではできないと感じたもので…。 ご教授お願いします。
- ベストアンサー
- CSS
- <img>タグを<span>でくくりたい
Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- window.onload = function() { var out_span = document.createElement('span'); out_span.setAttribute('class', 'align_left'); var list = document.getElementsByTagName('img'); var img = list[0]; /* この後、 どうやって、out_span を挿入すればよいのか？ */ } //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★ インデントは全角スペースで行っております。 ご教示お願いします。
- ベストアンサー
- JavaScript
- /imgタグが生成される
いつもここにはお世話になっております。 XSLでHTMLを出力する際なのですが、以下のように記述するとimgタグの後に/imgタグが付いてきてしまいます。 <img> <xsl:attribute name="src"><xsl:value-of select="@gazou" /></xsl:attribute> </img> →出力結果：<img src="hoge.jpg"></img> xsl:elementでも同様の結果でした。 これを <img src="hoge.jpg" /> のように出力するにはxsl:textのdisable-output-escaping="yes"で対応するしか方法は無いのでしょうか？
- 締切済み
- XML
- 画像の上に文字を表示
スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 ＃マウスをのせて表示は除外。
- ベストアンサー
- CSS
- Firefoxでの画像の縦の隙間をなくしたい
現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }
- ベストアンサー
- CSS
- CSSで背景画像をウインドウの中心（横方向）に配置する方法？
過去質問したのですが、解決していないのでまた質問させて頂きます。CSSでウインドウの大きさを変えても指定した背景やコンテンツがずっと中心にいさせる方法はありますか？Yahooのような縦長のページにしたいと思っています。いまの段階は760pxの幅でずっと左側にいるようになっています。中心に移動させたいです。以下に参考のためにソースをのせておきます。 --- css --- h1{ margin-top: 0px; margin-bottom: 10px; text-align:center; } p{ text-align:center; margin-top: 0px; margin-bottom: 10px; } body{ margin-top: 0px; } #maincontents{ width:70%; background-image:url(../img/sakanay.jpg); background-position: center; margin-right: auto; margin-left: auto; } --- html --- <body> <div id="maincontents"> <p align="left"><font size="-3">Team X</font></p><br> <h1><img src="img/ten02.jpg"></h1> <p><img src="img/2005g.jpg"></p> <hr> <a>Copyright(c)2006 TX All rights reserved.</a> <p> </p> <br> </div> </body>
- ベストアンサー
- HTML
- imgタグをそのまま使うことは正しいの？
<h2>hogehogehoge</h2> <p>hogehogehogehogehogehogehoge</p> <img src="images/hoge.gif" alt"hoge" /> これって正しいですか？ <h2>はタイトル <p>は段落（文章？） <img>は？？？？ 画像？ もしかして正確にはimgタグも<p>とかで囲わなければいけないのか？ 教えてください。。。
- ベストアンサー
- HTML
