- ベストアンサー
画像の中央横にテキストを表示したい
Dreamweaverでホームページを作っています。 30×30ピクセルほどの小さな画像のとなりにテキストを表示させたいのですが、デフォルトだと画像の下側に合わさってしまいます。 そこで、imgに対するalignオプションで"middle"を指定しました。 ところが、それだと上方に位置されてしまいました。 一体どうすれば、画像とテキストの中央が合ってくれるようになるのでしょうか？ ご存知の方、どうかお教え願えますでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
30x30くらいの画像では上付きの文字のように見えるかも知れませんけど、仮に100pxくらい高さがあれば、真ん中に文字が来ているように見えます（笑） 小文字のxの高さが真ん中に来るので。 回避方法としては皆さんの書いているようにテーブルを使うのがメジャーですが、この場合ソースが煩雑になったり、リンクを一回で貼れなかったりするので、こういう方法もあります。↓ <img src="●●.gif" width="30" height="30" style="vertical-align:middle;margin-bottom:5px;">テキスト ↑画像の下に5px余白をとっています。 文字サイズによって、多少、margin-bottom:5px;を変えなければならないかも、だけど。 あとは、こんなの。 <p style="line-height:30px;"><img src="●●.gif" width="30" height="30" style="vertical-align:middle;">テキスト</p> ↑行の高さを30pxにしています。 これが面倒なら、画像をあらかじめ下のほうに余白をとって作るとか。 リストアイテムにして、リストイメージに画像を使うってのもアリです。 色んなやり方があるので、この場所ではこのやり方がスマート！と思ったやり方でドウゾ♪
その他の回答 (2)
- mudpup
- ベストアンサー率41% (17/41)
#1の方の回答に私も同感です。 こんな感じのＨＴＭＬではどうでしょう？ <html> <head> <title>Align Text and Graphics</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td valign="middle"><img src="picture.gif"></td> <td valign="middle">これがテキストです。画像と中央があっていますか？</td> </tr> </table> </body> </html> Hope that helps. -mp
お礼
ご回答大変ありがとうございます。 ２重のテーブルの中にその画像とテキストを いれたいので、できればテーブルを使わずにできればと 思います。 （どうすればよいのでしょうか．．．） ご回答感謝いたします。 ありがとうございます！
- BIGMAC
- ベストアンサー率25% (624/2491)
普通はtableタグを使って、画像とテキストを横に並べる… ってこと二なると思いますが。
お礼
ご回答大変ありがとうございます。 ２重の入れ子のテーブルの中に画像を入れたいので、 できればテーブルでは無い方がよいなーと考えています。 ありがとうございました。
お礼
ご回答大変ありがとうございます！ 様々なやり方があるんですねー。 スタイルシートを使うんですね？ まだ試してはいませんが、とにかくまず お礼を申し上げます。 どうもありがとうございました！