![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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_ …
解決法をお分かりの方、どうか教えてください。
No.6ベストアンサー
- 回答日時:
> 現状、以下の宣言で正しい位置に表示されているhtmlがあります。
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
上記を【A】、
> 宣言を
> <?xml version="1.0" encoding="UTF-8"" ?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
上記を【B】、とさせて頂きます(ちなみに"UTF-8""、とダブル・コーテーションが余計に一つついているのはコピペミスですよね)。
(しかし、比較対象がHTML4.01ですらなく3.2の事を仰っているとはさすがに想像しませんでしたが…)
> ベースとなる指定は一切ないと考えていただいて結構です。
【B】のCSSは以下のみとさせて頂きました。font-size、line-heightなどは一切指定しておりません。
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: baseline;←bottomの替わりに使用しているのは、前回回答させて頂いた理由に依ります。
}
ご提供された情報でサンプルを作成し、IE6、Firefox2/3で表示結果を確認させて頂きました。
しかし私の環境では、「正しい位置に表示されている」という【A】の方がおかしな表示(IE、Firefox問わず)に見えているのですが…?
2番目の、ALIGN="MIDDLE"、を指定している画像の、続くテキストとの位置関係は、「中央」ではなくむしろ「上寄せ」になっている様に見えます。
一方の【B】では、続くテキストが画像のほぼ「中央」に揃っている様に見えます。
> このときに css で middle, bottom の指定をどうすればよいのかお聞きしたいのです。
上記の様に指定したものを検証する限り、実装結果は「正しい」としか言い様がないので…申し訳在りませんがこれ以上お答えできる事はなさそうです。【B】は仮に適当なfont-sizeを指定(例えばfont-size: 12px;)したとしても表示結果は意図した通りのものになりますので。
> これならば、css で元の状態と同じように表示できますか?
検証結果に従って言うなら、「同じ」にはなりません。また、ANo.4様もご指摘の通り、HTMLの拡張属性だったもの=CSSのプロパティ、というわけでもありません。それぞれ定められた仕様の元に、各ブラウザごとの解釈で実装しています。上記のCSSによる指定の挙動に納得が行かないのであれば、質問者様が望まれる結果を得られるDOCTYPE及びマークアップを選択されるのもやむを得ないでしょう。
HTML3.2 なのは、HTMLをあるソフトで自動生成していて、そのソフトの吐く HTML が 3.2 なのです。
もう更新されていないソフトのため、このHTML3.2をXHTMLに変換するために試行錯誤してます。
このソフトは画像も含めて作成し、その HTML3.2の <img align="...">では適正位置(middleが「中央」になっているかではなく、見た目上文字と並んで表示される適切な位置)に設定されるのです。
なので、質問は「 HTML3.2 のimgタグのalign属性と同じ位置に XHTML で表示することはできるか?」というのが正しい質問ですね。
混乱させてしまい申し訳ありません。
この質問の意味においても、何度もお返事いただいているようにブラウザの挙動に依存するため不可能だということであれば、この質問は終了させていただこうと思います。
No.5
- 回答日時:
> XHTML+CSSに移行するのに、表示のためにtable を使うってのは、ちょっと本末転倒になってしまいますね・・・。
無論です。ANo.2での発言は決して「tableにすればいい」という意味ではなく、単に文書内容を確認したかっただけですので…
> CSSの指定はどうすればよいか、ということが知りたいです。IEには確かにバグが多いですが、firefoxでも位置がずれます。
> これはfirefoxにもvertical-alignのバグがあるのでしょうか。
> それとも指定方法を変えれば、正しく表示されるものなのでしょうか。
Firefox2/3に関しては特にvertical-alignプロパティに関するバグは報告されてなかった様に思いますが…念の為適当なキーワードで検索してみましたが特に見当たらない様です(検索漏れでしたらすみません)。ただ、私自身は今までの制作経験で、Firefoxでvertical-alignの挙動が思い通りにならないという事がなかったので、質問者様の仰る「firefoxでも位置がずれ」る、という状況がいまいちイメージできません。もしかしたら他の要因などが絡んで、ある一定の条件の下では不具合の様に思われる状態が引き起こされるのかもしれないですね。前後のブロックを含めたもう少し詳しいサンプル(画像のファイルサイズやCSSのベースとなる指定(font-sizeやline-heightなど…)、XHTMLのヴァージョン、XML宣言の有無、も)を公開された方が解決の糸口が見つかるかも…?
ANo.3様へのレスを見ると、
> 文章中に複数の画像が何度も出てくるようなソースなのです。文と絵文字が混在するような感じでご理解いただければいいかと思います。
…とありますので、その様な状況だとちょっとこちらが当初イメージしていた様なものとは異なる様ですので。
> background-image で対応できるものなのでしょうか?
その画像が論理構造上どういう意味を持つかにも依りますし(「意味」のある画像、それが表示されないと文書内容自体が正しく把握できなくなる、という情報を持つものであれば「背景」にすべきではないと考えます)、文書構造がどの様になっているかにも依りますね。
ということで、
> CSSの適切な指定でうまくいくものかと思ったのですが、できないということなんでしょうか。
現段階では情報不足の為、判断は下せないです。
現状、以下の宣言で正しい位置に表示されているhtmlがあります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
CSSの指定は一切なしで、BODY内で以下のように書いてあります。
++++++++++++++++++++++++
例えば、 <IMG
WIDTH="27" HEIGHT="27" ALIGN="BOTTOM" BORDER="0"
SRC="img1.gif"
ALT="img1"> とか、他にも
<BR> <IMG
WIDTH="53" HEIGHT="29" ALIGN="MIDDLE" BORDER="0"
SRC="img2.gif"
ALT="img2"> とかのimgタグが文章中にこうやって
<IMG
WIDTH="16" HEIGHT="14" ALIGN="BOTTOM" BORDER="0"
SRC="img3.gif"
ALT="img3"> 入ってる.
+++++++++++++++++++++++
宣言を
<?xml version="1.0" encoding="UTF-8"" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
に変更し、BODYをスクリプトで以下のように変更します。
***********************
例えば、 <img
width="27" height="27" class="bottom"
src="img1.gif"
alt="img1" /> とか、他にも
<br /> <img
width="53" height="29" class="middle"
src="img2.gif"
alt="img2" /> とかのimgタグが文章中にこうやって
<img
width="16" height="14" class="bottom"
src="img3.gif"
alt="img3" /> 入ってる.
**************************
このときに css で middle, bottom の指定をどうすればよいのかお聞きしたいのです。
ベースとなる指定は一切ないと考えていただいて結構です。
逆に目的にあった表示のために、必要となるベースの指定があればそれも含めて教えてください。
これならば、css で元の状態と同じように表示できますか?
No.4
- 回答日時:
まず第一番目にhtmlやcssの結果をどのように表現するかはhtmlの仕様では
規定されておらずブラウザにまかされており、その実装ごとに異なります。
第二番目にhtmlの属性による指定とCSSによる指定は別のものです。
多くの場合、多くのブラウザで対応する表記では同じ表現になるよう
実装されていますが、それはそのブラウザがたまたまそのように
実装されているだけともいえます。
過去の遺産を新しい仕様に移行する場合には、簡単に移行できない点はつきものです。
あきらめてtableなどを使用する方法が確実に思えます。
また逆にこれだけ爆発的に普及してしまった仕様は少なくとも100年か200年は
互換性が保たれたまま使い続けることでしょう。
なので、部分的に属性に頼るというのもひとつの手だと思います。
No.2
- 回答日時:
> ぴったり合うものはないのでしょうか?
【参考】http://cssbug.at.infoseek.co.jp/detail/winie.html
【参考】http://webtech-walker.com/archive/2007/05/212151 …
上記にIE6(及びそれ以下のヴァージョン)のCSS関連のバグリストが整理されていますが、こちらをご覧になればおわかり頂けます様に、IEは仕様に添わない独自解釈(バグ)が非常に多く、今回質問者様が煩わされているvertical-alignプロパティだけでも5項目も不具合が報告されています。こればかりはIEの実装状況なので、どうしようもないかと…
画像と隣り合う文章の水平方向の位置に対し、vertical-alignがIE6でもきっちり有効になるには条件が限定されます。「画像」と「テキスト」がtableの別々のセルに入っていれば、それぞれのtdに対してvertical-alignを調整すれば解決するので楽なのですが、「表」が相応しい様な文書構造ではないですよね?
時間がなく、今回の質問者様のケースに当てはめられるか未検証ですが、もしかしたら下記の方法あたりの応用が利くかも?しれません。
http://oshiete1.goo.ne.jp/qa4334242.html
ご希望に添えない場合は悪しからずご了承下さい。
<img align="bottom" ...> で適切な位置に表示されていたものをXHTML+CSS に移行するために<img class="bottom" ...> で指定し,CSSで
img.bottom { vertical-align:bottom; }
と指定するとずれてしまうので、CSSの指定はどうすればよいか、ということが知りたいです。
XHTML+CSSに移行するのに、表示のためにtable を使うってのは、ちょっと本末転倒になってしまいますね・・・。
IEには確かにバグが多いですが、firefoxでも位置がずれます。
これはfirefoxにもvertical-alignのバグがあるのでしょうか。
それとも指定方法を変えれば、正しく表示されるものなのでしょうか。
CSSの適切な指定でうまくいくものかと思ったのですが、できないということなんでしょうか。
No.1
- 回答日時:
> alignで設定していたときと位置がずれます。
思った通りの表示にならないのは、IE6/7で下端に合わせにしようとした場合(img.bottom {vertical-align: bottom;})のみではないですか?
念の為検証してみましたが、その組み合わせでしか不具合が起きない様ですので。
img.bottom {
vertical-align: baseline;
}
に変更すれば、とりあえずIEでも「下端に合わせ」た状態になります。厳密には"vertical-align: baseline;"と"vertical-align: bottom;"はイコールではないのですが(それは質問者様が参考にされたサイトにも書いてありますのでご承知の事と思います)、まあ手っ取り早い妥協策として。
確かに bottom だけみたいです。
baseline にすると、大体あってますが、まだちょっとずれてるような
感じですね。
text-top の方があっているんですが、たまに大きくずれるものがあります。
ぴったり合うものはないのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
拡張子無しで画像を表示したいです
-
画像が表示されません
-
オンマウスで画像を変えたい。
-
ボタンを押したままにする。
-
クリッカブルMAP領域が分かる様...
-
<area></area> 部分にボーダー...
-
HTMLファイルの一部の画像だけ...
-
pngやjsの後ろの英数字の意味は...
-
IMGタグでTIFF画像を表示
-
画像サイズをHTMLタグやCSSで統...
-
画像が変わりません;教えて下...
-
Dreamweaver:マウスオーバーで...
-
画像の横に文章を表示する
-
画像をリンクすると枠がついて...
-
<A href= と<IMG srcの使い分け
-
ホームページビルダーで作成し...
-
altに長文テキスト
-
スマホで、画像をクリックする...
-
バナ―広告
-
ホームページ作成について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
IMGタグでTIFF画像を表示
-
期間ごとに画像表示を切り替え...
-
バナーの貼り方とバナーにリン...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
タイトルバーに画像を入れるHTM...
-
クリッカブルMAP領域が分かる様...
-
スライドショーの上にロゴマー...
-
pngやjsの後ろの英数字の意味は...
-
画像クリックでクリップボード...
-
HTMLにQRコードを挿入する方法
-
<A href= と<IMG srcの使い分け
-
カーソルを合わせると文字が出...
-
背景が透明なリンクボタンで、...
-
form以外でのpostってできますか?
-
HTML上の画像を結合する方法が...
-
複数のボタンで1つのエリアに...
-
リンクバナーのHTMLタグ。画像...
-
CSSなどでHTML全体の表示を拡大...
おすすめ情報