- ベストアンサー
画像の中央横にテキストを表示したい
- みんなの回答 （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タグを使って、画像とテキストを横に並べる… ってこと二なると思いますが。
お礼
ご回答大変ありがとうございます。 ２重の入れ子のテーブルの中に画像を入れたいので、 できればテーブルでは無い方がよいなーと考えています。 ありがとうございました。
関連するQ&A
- CSS 画像横に改行があるテキストを高さ中央で
画像の右側にテキストを回り込ませ、 そのテキストを、高さ中央揃えにしたいのですが テキストに改行がある場合には どのようにしたら良いでしょうか？ テキストに改行があるために vertical-align:middle; を使うとテキストの<br>以下が画像下に回り込んでしまいます。 vertical-align:middle; を使うと、改行以下も画像の横に表示されますが、 上揃えとなってしまいます。 何かもっと違う方法が良い方法があれば教えてください。 お願いします。
- 締切済み
- CSS
- 画像の横にテキストを縦方向中央に配置したい
画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？
- ベストアンサー
- CSS
- テキストと画像の縦の中央揃えの質問です
下記の参考サイトのサイトマップをホームページ作成の練習として作成中です http://lolipop.jp/home/sitemap/ テキストリンクの左右に画像が配置されております。 左の画像は<dd>の背景画像。 右の画像は<img>でテキストリンクの右横に配置されてます(html)。 <dd><a>テキスト</a><img></dd> 左は上手くいくのですが、右の星型の画像が上手く配置されません。 <img>にvertical-align：middleを指定するのですが、各ブラウザでばらつきがあり、均一になりません。 テキストリンク、画像が縦に中央配置されません。 求めていることは、<dd>の中で、テキストリンク、画像を縦に中央配置させたいと思っております。 <dd>の高さは26px フォントサイズは13px <img>は、高さ17px、幅17px が希望です。 どのように、html、ｃｓｓを指定すれば各ブラウザで均一に表示されるでしょうか？
- ベストアンサー
- CSS
- 画像の横に画像を入れたいのだが．．．
ホームページ作成初心者なのですが、 画像の横にテキストが行かなく画像の下に行ってしまい困ってます＞＜ ちょっと今てこずってる所を貼りますがなにか間違ってるところがあれば ご指摘お願いします！ <div align="right"> <a href="sirakage.html" onmouseover="onpoint.src='gyarariy2.jpg'" onmouseout="onpoint.src='gyarariy1.jpg'"> <img src="gyarariy1.jpg" align="middle" vspace="40" name="onpoint" border="0"></div></a> この次に画像のｈｔｍｌを入れてみるのですがダメダメで．．． 何卒宜しくお願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
- 中央に配置して上にテキストを置きたい
dreamweaver8 を使ってホームページを作っています。 画像（中央に配置）の上にテキストを置きたいのですが、どのような方法がベストなのでしょうか？ 試してみたのは… １．背景として配置して上にテキストを置く。 でもこれだと、背景の画像が中央にいきません。 ２．画像をイメージとして配置 これだと、テキストが上に置けません。 画像を中央に配置して、かつ上にテキストを置けるようにするにはどうしたらいいのでしょうか？？ よろしくお願いします。
- 締切済み
- CSS
- CSSで画像を中央に持っていく方法。
簡単な問題です。 画像を liの枠内の上下左右中央に配置するには、どうすればいいでしょうか？ 画像のサイズがまちまちなので、 paddingなどで数値を指定するのは、NGです。 vertical-align:middleはだめでした。 text-align:centerで左右の中央に持って行く所まで、できました。 HTML ==================== <ul class="book_slide"> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> <li><img src="image/bookmihon.jpg" width="51" height="75" alt="*" /></li> </ul> ====================== css ======================= ul.book_slide li{ float:left; height:114px; width:80px; border:1px solid #000; text-align:center; } =======================
- ベストアンサー
- CSS
- 画像とテキストのレイアウト
左に画像、その画像の右に複数行のテキストを、画像高さの中央に配置したいと思っています。 <table><tr><td><img></td> <td style="vertical-align:middle"> 文１<br> 文2<br> 文3<br> </td></tr></table> をテーブルを用いないでレイアウトしたいということです。 <img src="loc"> 文１<br> 文2<br> 文3<br> では、文１ のみが画像右に表示されます。 <img src="loc" style="float:left"> 文１<br> 文2<br> 文3<br> では、文全体が画像のtop位置から表示されます。 どのようにスタイルシートで指定すればいいのでしょうか？
- ベストアンサー
- HTML
- ボックス内中央配置特殊版
<div><img src="sss.jpg"></div> でdivの中央に画像を配置したいとき cssで実現しようと思ったら div{ width:100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; } あたりでできそうですが、画像がボックスより小さい場合はこれでいいのですが、 今回やりたいのはボックスより大きな画像の中央をボックスの中央に配置し、 ボックスからはみ出したものはover-flow:hiddenで見切りたいのです。 cssだけで実現可能でしょうか？ js使って画像をposition:ablosute にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
- ベストアンサー
- HTML
- HTMLで画像を囲むようにテキストを回り込ませることはできますか？
htmlで、画像にテキストを回り込ませたいのですが、<img src="画像url" align="left">か<img src="画像url" align="right">ではなく、画像を真ん中に持ってきて下記のように左右にテキストを回り込ませることは可能ですか？ テキストテキストテキスト テキスト テキスト テキスト 画像 テキスト テキスト テキスト テキストテキストテキスト
- ベストアンサー
- HTML
お礼
ご回答大変ありがとうございます！ 様々なやり方があるんですねー。 スタイルシートを使うんですね？ まだ試してはいませんが、とにかくまず お礼を申し上げます。 どうもありがとうございました！