- ベストアンサー
画像に並ぶ文字の縦センタリングがズレてしまいます
わかってらっしゃる方からすると、 おそらく相当つまらない質問な気がして恐縮なのですが、、、 画像の右横に文字を縦センタリングをしたいのですが、 ----------------------------------- ------ タイトル文言 -画像- ------ ----------------------------------- というようにズレてしまいます。 <hr size="5" noshade color="#000080"> <div class="title"> <img src="../images/image001.jpg" alt="image001" align="middle" > <font size="+2">タイトル文言</font> </div> <hr size="5" noshade color="#000080"> 真ん中にはならないものでしょうか？ お暇な時にご回答いただけたら幸いです。 HTMLでよく使われるような気さくなサイトがございましたら、 合わせてお教えいただけるとありがたいです。
- HTML
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2です。#3さんにつられて。 そうですね。thをこんな風に記述したら table要素でも不自然ではないかもしれませんね。 vertical-alignは「行」についてみるものですから 最初のサンプルでは後続の#PCDATAやCDATAが多くなると中央にならないですし。 ただ、画像が若干底辺から浮くんですよね・・・ marginでもpaddingでもないとしたらこれは何だろう？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <style type="text/css"> p#sample{ border-style:solid none; border-width:5px; border-color:#000080; } p#sample img{ vertical-align:middle; } table#sample2{ border-collapse:collapse; } table#sample2 caption{ display:none; } table#sample2 thead{ display:none; } table#sample2 tbody tr{ border-style:solid none; border-width:5px; border-color:#000080; vertical-align:middle; background-color:red; } </style> </head> <body> <p id="sample"> <img src="Q3133457-1.png" alt="" /> あいうえおかきくけこさしすせそたちつてとあいうえお かきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきく けこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさ しすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせ そたちつてとあいうえおかきくけこさしすせそたちつてと </p> <table id="sample2"> <caption>画像とその説明</caption> <thead> <tr><th>画像</th><th>説明</th></tr> </thead> <tbody> <tr> <td><img src="Q3133457-1.png" alt="" /></td> <td> あいうえおかきくけこさしすせそたちつてとあいうえお かきくけこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきく けこさしすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさ しすせそたちつてとあいうえおかきくけこさしすせそたちつてとあいうえおかきくけこさしすせ そたちつてとあいうえおかきくけこさしすせそたちつてと </td> </tr> </tbody> </table> </body> </html>
その他の回答 (3)
- daisy_k
- ベストアンサー率25% (1/4)
再びANo.1のものです。 pictetさんがご希望の表示は、tableタグを利用すると1番手っ取り早く実現可能かと思います。 イメージとしては、2つの四角(囲い = セルといいます)を横(1行)に並べて、その四角の中にそれぞれ画像とタイトル文言を配置します。 各セルの縦位置に対して真ん中揃えの指定をしてあげれば、ご希望に近い表示になるかと思います。 但し、「レイアウトの調整というのは本来スタイルシートの役割」ということから、最近はレイアウトを揃える目的でtableタグを使用するのはあまり推奨されていないようです。 実際のHTMLソースの書き方ですが、先ほどのURLにtableタグ関連についての詳細な説明がありますので、是非チャレンジなさってみてください。
お礼
おはようございます。 今回の調べ物で色々なページを行ったりきたりしてる際に そういえばおっしゃる通り、 ”悪いHTML”の例に”全体をテーブルで囲む”という記述がありました。 himajin100000さんに書いていただいたサンプルコードをためさせていただいた結果、 お二人が言われているテーブルを使用しないとセンタリングが実現しないようですので、 全体でなくタイトル部分だけをテーブルで囲もうかと思っています。 ありがたいことに、いただいたサンプルコードで終わったも同然！！なのですが、 上下罫線をつけたりと細かなカスタマイズを教えていただいたHPで調べて完成させたいと思っております。 大変お世話になりました。 また困ってしまった時には是非お力をお貸しください。
- himajin100000
- ベストアンサー率54% (1660/3060)
middle値を取るのは align属性ではなくvalign属性だが， valign属性があるのはtable関連要素のみ。img要素にはない。 http://www.w3.org/TR/REC-html40/index/attributes.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <style type="text/css"> p#sample{ border-style:solid none; border-width:5px; border-color:#000080; } p#sample img{ vertical-align:middle; } </style> </head> <body> <p id="sample"><img src="Q3133457-1.png" alt="" />あいうえお</p> </body> </html>
お礼
himajin100000さん、daisy_kさん 忙しい中、色々ご検討いただき本当にありがとうございます。 質問を投げかけておきながら、 すぐに試してお返事できなくて本当に申し訳ありません。 明日朝、教えていただいた方法ためさせていただきます！ ありがとうございます。
- daisy_k
- ベストアンサー率25% (1/4)
こんにちは。 まず、2点教えて頂きたいことがあるのですが、 (1)pictetさんが表示したいイメージは以下であっていますでしょうか？ ------------------------- ------ -画像- タイトル文言 ------ -------------------------- (2)divタグでtitleというクラスを指定されていますが、このtitleクラスは具体的にはスタイルシートでどのような定義をされているのでしょうか？ 私も専門家ではありませんが、上記2点をお教え頂けると、もう少しお役に立てるかもしれません。 尚、私がいつも参考にしているURLを載せておきます。HTMLに携わる方なら、ほとんどの方がご利用になっているのではないかと思います。既にご覧になっていたら読み捨ておきください。
お礼
すばやいご回答、本当にありがとうございます。 質問が要領を得ず申し訳ありませんでした。 （１）→そうなんです。そのようにセンタリングしたいです。 （２）→お恥ずかしいことに、 タイトルだし、titleって宣言するもんなんだろうか。。。 と推測し指定してしまっていただけで、 スタイルシートのほうでtitleに対して何もフォーマットを定義はしておりませんでした。 すみません、手探りで切り張り切り張りしててお恥ずかしいです。 教えていただいたページも読み応えありそうで、 大変使えそうです（って生意気な物言いですが）。 ありがとうございます。
お礼
おはようございます。 たくさんのサンプルコードを書いていただきまして、 本当にありがとうございます。 sampleバージョンのほうが直球な感じがして、 初心者な私にも解析しやすそうだなぁっと思っていたのですが、 sampleバージョンはフォントを規定値にしている場合はセンタリングされますが、 フォントを大きくした場合に規定値でセンタリングされた底線を基準に字が大きくなってしまいました。 ＞後続の#PCDATAやCDATAが多くなると中央にならないですし っておっしゃってるのはこのことでしょうか？ 全然違っていたらすみません。 ということで、 やはりお二人が言われていた、テーブルを使用したSample2バージョンを使わせていただこうかと思っています。 こちらはバッチリセンタリングされました！ 少々上下に線を引いたりとカスタマイズするためにまた調べてみようかと思います。 教えていただいたHPは英語だったので、 私にはちょっと無理でした（笑） お時間をたくさん頂戴し、本当にありがとうございました。 また、暗礁に乗り上げてしまった時には是非よろしくお願いいたします。