- ベストアンサー
画像の高さを指定するタグについて
(画像)ああああああああああああああ ああああああああああああ 上のように文章の頭に小さな画像を貼りたいのですが <img src="http://xxxx.gif" align="middle" ・・・ と、「align=center」または「align=middle」とすると、IEでは文字の真ん中にきても、Firefoxだと下に来てしまいます。 Firefoxでも真ん中に表示させたいのですが、cssでなく、htmlタグでこれを解消する方法はありますでしょうか。
- noname456
- お礼率77% (7/9)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
align属性はFirefoxでも有効なはずです。 多分、画像タグではなくほかの部分に問題があるのだと思います。 (画像)INFOMATION 例えば上記の内容を幅ギリギリの狭いテーブルで囲んだ場合、 IEでは画像の横に文字が表示され、Firefoxでは画像の下に文字が表示されるということがあります。
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
#1さんと同じく、原因については不明です。他の部分を疑ったほうがよいかと思います。 img の align="center"は独自拡張なので使わない方が無難です。使うならalign="middle"を使ったほうがよいでしょう。 また、align="middle"ではテキストの「ベースライン」と画像の中央を揃える指定です。 完全に中央揃えにしたいならやはりスタイルシートを使った方がよいです。 <img ・・・ style="vertical-align:middle;">
お礼
ありがとうございました。今後はalign="middle"を使いたいと思います。 先ほどのお礼にも書きましたが、どうも原因がわからないので、見直してみて、CSSも考えてみます。
関連するQ&A
- 画像の位置を指定するCSS
画像の位置を指定するCSS 文字の前にポイント画像を<img src="~.gif" alt="" />のタグで置きたいんですが、ずれて文字の上のほうに表示されてしまいます。 すごく簡単に文字の中央に表示されるように指定できるCSSのタグがありますがどんな記述だったか忘れました。 検索しても出てこないので困ってます。 どなたか教えてください。 ちなみに background: url(hogehoge.gif) no-repeat 10px 0.5em;list-style: none;} これではないです。 もっと簡単でtext-alignのようなかんじの記述です。でもtext-alignではないです。 middleみたいな記述があった記憶があるのですが確かかどうか自信ないです。
- ベストアンサー
- HTML
- 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
- HTMLの文章中の画像のベースラインに下線を引くには
XHTML1.0 で下記のような文に対し, <a>~</a> のベースラインに下線を引きたいです。つまり img タグで表示する画像に下線を引きたいということです。 *************HTML*********************** これはテスト<a href="test"><img src="image.gif" width="20" height="33" class="middle" alt="1" /></a> です。 *************CSS************************ img.middle { vertical-align: middle; } **************************************** テキストだと下線が引かれますが、画像だと引かれないようです。 なお、下線は画像の下のふちではなく、テキストのベースラインに引きたいです。 CSS でどのような指定をしたら下線が引かれますか?
- 締切済み
- HTML
- テーブル高さ指定タグについて
テーブル高さ指定タグについて サイズがバラバラの4枚の画像をテーブルを使って同じ幅・高さ縦横各2枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか?
- ベストアンサー
- HTML
- [携帯]divで指定した背景色から画像がはみ出す。
携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;"> <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" /> <br />こんにちは <div clear="all" style="clear:both;"> <img src="./images/space.gif"> </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。
- 締切済み
- HTML
- スタイルシートついて
検索などしていろいろ調べて試したのですが、検索方法が悪いのか知識がとぼしいのかうまくいかないので質問します。 --- <img src=01.gif align=center>タイトル --- 上記の様なタグでここの部分を(align=center)スタイルシートに変えるにはどのようにしたら良いのでしょうか? また下記のようにまとめてimgまたはtdなどで指定できないでしょうか? <style type="text/css"> <!-- img{} --> </style> 分かりにくい文章ですみませんかよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- ALT属性に見出しタグをつけると画像がズレます。
見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。
- ベストアンサー
- HTML
- ★CSS★
CSSについて質問です。 firefoxでは下記を記載し、たてよこの真ん中に表示することができました。 IEではセンターにすることはできましたが、ミドルにすることができませんでした。 display:table-cell; が効かないのでしょうか? IEでもミドルにできる方法を教えてください。 .imgs{ display:table-cell; height: 160px; width: 160px; text-align:center; vertical-align:middle; } <div class="imgs"> <a class="aaa" href="./pop.php> <img class="imgtf" id="imgtf" alt="タイトル" src="images/thumbnail/eee.jpg"> </a> </div> よろしくお願いします。
- ベストアンサー
- CSS
- 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
- HTMLのレイヤーとは?
別の質問で、レイヤーを重ねてみてはどうか、という回答を頂いたことがあります。レイヤーとは何ですか? あるサイトで、画像の上に画像(周りを透過させたgifアニメ)を見ました。大変綺麗でした。また、その上に重ねられたgif画像は枠線を表示したテーブルの、その枠線の上まではみ出ていました。 どうやっているのだろうと思いソースを見たら <IMG SRC="上のgifアニメ" ALIGN="MIDDLE" NATURALSIZEFLAG="3"></div> <IMG SRC="下の画像" ALIGN="BOTTOM" NATURALSIZEFLAG="2"> とありました。CSSには #layer { position: absolute; の次にtop,left,width,heightvisibilityの設定がしてありました。 同じように画像を重ねる方法をタグ辞典で探したら、positionとz-indexで指定するよう書いてあり、指定する項目もよく似ていますがlayerの文字はありません。 layerとはどのようなタグでしょうか?
- ベストアンサー
- CSS
お礼
ありがとうございました。そのページ内には他に<P>タグしか入れてないのですが、全体のデザインを外部スタイルシートでしていて、imgの指定もしているせいかと思い、「margin:0px」にしてみましたが、同じでした。他のところも見直してみます。