- ベストアンサー
文字の前の画像を縦中央に配置したい
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
vertical-alignを使用します。 <IMG src="***.gif" style="vertical-align:middle"> http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-vertical-align
関連するQ&A
- 画像の横にテキストを縦方向中央に配置したい
画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？
- ベストアンサー
- CSS
- 画像を縦にそろえて表示させたいのです。
画像を縦にそろえて表示させたいのです。 リストボックスの中身を「△」（1up.gif）「▽」（1down.gif）で入れ替える。 そんな画面を作ろうとしています。（今は画像を並べているだけです。） 「△」(1up.gif) 「▽」(1down.gif) の２っのボタンはリストボックス脇の上端と下端にタテに並べたい所ですが どうしても添付の画像のようになってしまい悩んでおります。 ※の行で何かしらやればよいのかと align="left" や BR Clear=ALL などを試したのですが「▽」ボタンだけがリストボックスの下の行に配置されてしまいます。 皆様のお知恵を拝借したく思います。 宜しくお願いします。 htmlソース <body> <hr align="left" width="100%" SIZE="5"> <select size="15" name="Listbox1" style="WIDTH:200px" multiple> </select> <IMG src="../images/1up.gif" align="top"> ※ <IMG src="../images/1down.gif"> <hr align="left" width="100%" SIZE="5"> <div align="left"> <IMG src="../images/Set.gif" </body>
- ベストアンサー
- HTML
- 画像の縦サイズが小さいと隙間が・・・
縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（IE6）。 隙間を空けずに、縦方向にぴったりとくっつけたいので困っています。 ネットで調べて色々な方法で試してみましたが、解決しません。 IE6ではあきらめるしかないのでしょうか。 どなたか解決策があれば知恵をかしてください。よろしくおねがいします。 （例） <div style="width:100px; background-color:red;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> <img src="image.gif" width="100" height="5" style="vertical-align:bottom; border:0;"> </div>
- ベストアンサー
- HTML
- 画像を縦に並べたら隙間ができることについて
画像を縦に並べたところ隙間ができてしまいます。 隙間無くくっつけたいのですがどうすればいいのでしょうか。 以下htmlです。 <img src="img/nakama_img01.gif" width="687" height="227" alt="画像１" /><br /> <img src="img/nakama_img02.gif" width="687" height="197" alt="画像２" /><br /> <img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" /> <br />で改行せずくっつけてタグを並べても同じ結果でした。 よろしくお願いします。
- ベストアンサー
- HTML
- 画像の位置を指定する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
- 画像の配置（上下の間隔）で教えて下さい。
初心者なのですが、本についていたｒｏｍを使って ＨＰを作成中です。 使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <table width="400"border="0 "align="center" cellpadding="0"lspacing="0"> <tr><td> <div align="center"><img src画像1.gif" width="700" height="300"vspace="10"> <img src画像2.gif" width="700" height="300"vspace="10"> </div></tr> </td> </tr> </table> <p align="center"> </p> こういった形になっているのですが、 どう直せば画像の間隔が狭くなるのでしょうか？ 宜しくお願いします。
- 締切済み
- HTML
- floatで左右に分けて配置した2個の画像の中央にテキスト
floatで左右に分けて配置した2個の画像の中央にテキストを回り込ませた後にテキストの続きの内容の画像を配置するとIE6でレイアウトが崩れしまします。 （NN7、Opera9、Firefox2では表示されるのですが…。） 初心者ですので困っています。お力をお貸し下さい。 ↓このように表示したいです。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■画像■ ■■■■ ■■■■ ■画像■ ■■■■ ↓IE6ではこのような表示になってしまいます。 ■■■■ テキスト ■■■■ ■画像■ テキスト ■画像■ ■■■■ ■■■■ ■■■■ ■■■■ ■画像■ ■画像■ タグは以下のとおりです。 ☆HTML☆ <div id="contents01"> <div id="contents01_left"> <img src="img/contents01_01.gif"> </div> <div id="contents01_right"> <img src="img/contents01_02.gif"> </div> <p>テキストテキスト</p> <p><img src="img/contents01_03.gif"></p> <p><img src="img/contents01_04.gif"></p> <p><img src="img/contents01_05.gif"></p> </div> ☆CSS☆ #contents01{ width:480px; height:140px; padding:10px; } #contents01_left{ float:left; width:150px; padding-right:10px; } #contents01_right{ float:right; width:150px; padding-left:10px; } どうぞよろしくお願い申し上げます。
- ベストアンサー
- HTML
- 正方形のセルに縦画像、横画像を中央に配置
よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>
- ベストアンサー
- 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
- テキストと画像の縦の中央揃えの質問です
下記の参考サイトのサイトマップをホームページ作成の練習として作成中です 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
お礼
ご回答ありがとうございます。 できました！ ありがとうございました！