ベストアンサー

文字の前の画像を縦中央に配置したい

2006/06/21 13:15

はじめてCSSを使ったホームページを作ってます。文字の前に画像を置きたいのですが、それが上付きになってしまいます。 <IMG src="***.gif" align="absmiddle"> として文字と同じ高さ（縦の中央）になったのですが、これをCSSですることはできますか。教えてください。

maya_s
お礼率92% (12/13)

HTML
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2006/06/21 13:45 回答No.1

vertical-alignを使用します。 <IMG src="***.gif" style="vertical-align:middle"> http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-vertical-align

質問者

お礼 2006/06/21 14:43

ご回答ありがとうございます。できました！ありがとうございました！

関連するQ&A

画像の横にテキストを縦方向中央に配置したい

画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。このHTNLの記述では無理でしょうか？
画像を縦にそろえて表示させたいのです。

画像を縦にそろえて表示させたいのです。リストボックスの中身を「△」（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>
画像の縦サイズが小さいと隙間が・・・

縦のサイズが小さい画像を縦に並べると、隙間ができてしまいます（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>
AIは使う人の年齢や市場にも影響する？人工知能の可能性

OKWAVE コラム
画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。隙間無くくっつけたいのですがどうすればいいのでしょうか。以下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 />で改行せずくっつけてタグを並べても同じ結果でした。よろしくお願いします。
画像の位置を指定するCSS

画像の位置を指定するCSS 文字の前にポイント画像を<img src="~.gif" alt="" />のタグで置きたいんですが、ずれて文字の上のほうに表示されてしまいます。すごく簡単に文字の中央に表示されるように指定できるCSSのタグがありますがどんな記述だったか忘れました。検索しても出てこないので困ってます。どなたか教えてください。ちなみに background: url(hogehoge.gif) no-repeat 10px 0.5em;list-style: none;} これではないです。もっと簡単でtext-alignのようなかんじの記述です。でもtext-alignではないです。 middleみたいな記述があった記憶があるのですが確かかどうか自信ないです。
画像の配置（上下の間隔）で教えて下さい。

初心者なのですが、本についていたｒｏｍを使ってＨＰを作成中です。使用しているフォントの関係で、文字を加工して画像としてＵＰしたいのですが、その文字（画像）の間隔が広すぎて、どうしたらいいのかわかりません。 <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> こういった形になっているのですが、どう直せば画像の間隔が狭くなるのでしょうか？宜しくお願いします。
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; } どうぞよろしくお願い申し上げます。
正方形のセルに縦画像、横画像を中央に配置

よろしくお願いいたします。テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。現在は次のように記述しています。 <TR> <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> <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>
ボックス内中央配置特殊版

<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 にして位置計算する手は頭に浮かんでますが、もっとシンプルにできそうな気がして質問してみました。
テキストと画像の縦の中央揃えの質問です

下記の参考サイトのサイトマップをホームページ作成の練習として作成中です 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で画像を左右中央に配置させたい。

CSSで画像を左右中央に配置させたい。 CSSとXHTMLでWebページをつくっていますが、左右550pxくらいの説明画像をつくりました。コンテンツ左右は600pxくらいでして、この600pxのDIVボックスモデルの中に左右中央に配置させたいのですが、検索しても遠回りな方法ばかりしか見つからず困っております。たった画像を中央に配置させるだけのことがそんなに難しいんでしょうか？検索してますと色々と複合技で達成するとか、モダンブラウザはこれを記述し、IE6にはこれを記述するとか、複雑なことしか見当たりません。 <div class="boxmodel600"> <p>文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。文章エリア。 </p> <img class="img-btmctr" src="../img/img01.gif" alt="" width="550" height="400" /> </div> CSSのほうは、以下です。ダメだったんでimg-btmctrのほうに「width: 600ppx;」と入れたんですがそれでもダメでした。 img.img-btmctr { vertical-align: bottom; padding: 10px 0 0 10px; margin-left: auto; margin-right: auto; width: 600ppx; } .boxmodel { display: block; width: 600px; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 30px; text-align: left; }
画像の高さを指定するタグについて

（画像）ああああああああああああああああああああああああああ上のように文章の頭に小さな画像を貼りたいのですが <img src="http://xxxx.gif" align="middle" ・・・と、「align=center」または「align=middle」とすると、IEでは文字の真ん中にきても、Firefoxだと下に来てしまいます。 Firefoxでも真ん中に表示させたいのですが、cssでなく、htmlタグでこれを解消する方法はありますでしょうか。
CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、どのように記述したら良いのかわかりません。下記のようにテーブルを使えば簡単に出来るのですが、これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？ちなみに左側画像の縦サイズは変わります。よろしくお願いします。 ------------------------------------------------------------------- <html> <head> <title>CSS</title> <style type="text/css">  </style> </head> <body> <div id="waku"> <table width="435" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="80"><img src="hoge.gif" width="80" height="変わります"></td> <td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td> </tr> </table> </div> </body> </html> -------------------------------------------------------------------
CSSで画像を中央配置（センタリング）する方法について伺います。

CSSで画像を中央配置（センタリング）する方法について伺います。 ※ボックスのセンタリングではなくて、ボックス内の画像のセンタリングです。単純に text-align:center; で中央配置されましたが、テキストが入っていないボックスでも、このタグで文法的には問題ないのでしょうか？ header内にphoto.gif画像が入っている場合。 CSS #header{text-align:center;} HTML <div id="header"> こんな単純で良いのでしょうか？初心者なので、とんちんかんな質問だったら申し訳ありません。
画像について質問です(html)

こんばんは。またお世話になります。前回の質問では迷惑かけてしまいまことに申し訳ありませんでした。以後気をつけるつもりですさて、今度もまた迷ってしまいました。レイアウトがめちゃくちゃになったりして上手くいきませんでした。今のソースはこれです。 <IMG src="img/ザ・ディー・マグラウドの画像.png" border="0" align="absmiddle"> <font><b>第１回戦：ザ・ディー・マグラウド</b></font><br> ただの雑魚です<br> <IMG src="img/ザ・ディー・マグラウドのモンスター.png" border="0" align=""> <IMG src="img/ザ・ディー・マグラウドのモンスター２.png" border="0" align=""> <IMG src="img/ザ・ディー・マグラウドのモンスター３" border="0" align=""> <IMG src="img/ザ・ディー・マグラウドのモンスター４" border="0" align=""> <IMG src="ザ・ディー・マグラウドのモンスター５negazou" border="0" align=""> <IMG src="ザ・ディー・マグラウドのモンスター６" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーンの画像.png" border="0" align="absmiddle"> <font><b>第２回戦：モンゴ・ザ・バァーン</b></font><br> ただの雑魚です<br> <IMG src="img/モンゴ・ザ・バァーンのモンスター１.png" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーン２.png" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーン３" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーン.png" border="0" align="absmiddle"> <font><b>第２回戦：モンゴ・ザ・バァーン</b></font><br> ただの雑魚です<br> <IMG src="img/モンゴ・ザ・バァーンのモンスター１.png" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーン２.png" border="0" align=""> <IMG src="img/モンゴ・ザ・バァーン３" border="0" align=""> <IMG src="img/クロス・デ・ジィーンの画像.png" border="0" align="absmiddle"> <font><b>第３回戦：クロス・デ・ジィーン</b></font><br> ゴルミアン・オート・クラッシュというモンスターが異常に強い。「ため」後のセル・５１ロケットは全体に約500のダメージ。防御が無いモンスターだと一撃死なのでためを発動されるまえに倒す<br> <IMG src="img/クロス・デ・ジィーンのモンスター.png" border="0" align=""> <IMG src="img/クロス・デ・ジィーンのもんすたー.png" border="0" align=""> <IMG src="img/クロス・デ・ジィーんのモンスター３ border="0" align=""> <IMG src="img/クリストス・ギアの画像.png" border="0" align="absmiddle"> <font><b>第４回戦：クリストス・ギア</b></font><br> 召還モンスターはなんとデス・バングスＸ一体のみ！ラッキー！！！と思ったそこのキミ！！そう簡単には倒せないぞ。デス・バングスＸは攻撃が4520、防御が3950、ＨＰが2000という普通の召還モンスターとは比べものにならないくらい能力が高い。（HPは普通）弱点といえば素早さがかなり低いことそれだけ。だがこいつに対抗できるモンスターが１匹いる。アーン・イヤーンというモンスターだ。ギガデイルという専用ワザでデス・バングスＸに４倍の効果が期待できる。（通常効果が300なので1200<br> <IMG src="img/クロス・デ・ジィーンのモンスター.png" border="0" align=""> 要するに、第２回戦のモンゴ・ザ・バァーンの画像が第１回戦の横に貼り付けられて、行替えをして３回戦目が１回戦目の下になればOKってことです。では宜しくお願い致します…。
cssで一部の文字や画像を中央に寄せる方法

よろしくお願いします。まずhtmlに以下の記述をしております。 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネットプリンター </p> レッスンブックについてのみ文字色を変えたいため<span>を使用しております。 <p class="font">～</p>にはtext-align:leftを;適用しており当然ですが、左に寄ります。ですが一部の文字や画像のみを中央揃えにしたいのですが、きっとclass名を入れれば良いのだと思うのですが、具体的にどこに記述したら良いのか分かりません。上記のimgと「レッスンブックのみを中央揃えにしたいと思っております。ご指導よろしくお願いします。
htmlで縦の中央揃えが上手くいきません。

htmlで縦の中央揃えが上手くいきません。 vertical-align : middleでいけると思われるのですが、上手くいきません。下記の部分です。 <div style="vertical-align : middle;"> <a href="http://www.yahoo.co.jp/"><img src="logo.png" /></a> > <a href="http://okwave.jp">okwave</a> > thispage </div> 何か間違えているでしょうか？それとも、テキスト以外は揃わないのでしょうか？
cssで画像を中央に寄せる方法について

よろしくお願いします。一部の画像を中央に寄せたいのですが方法が分かりません。現在の内容は以下のような感じです。【html】 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネットプリンター </p> 【css】 .font2{ text-align: left; width: 750px; padding: 20px; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 2px solid #191970; margin-left: 0; margin-right: 10; background-color: #ffff00; font-weight: bolder; } imgのみ中央に寄せたいのですがご指導をお願い致します。良く分からなかったのですが以下のような記述をしてみたのですが中央に寄りませんでした。 <img src="img/hoge.gif" class="aaa" alt="テスト" width="250" height="130" /> cssに .aaa{ text-align: center; } また、同スタイルにborderとpadding、widthとpaddingを使用するのは有効な方法では無いのでしょうか？前回のご質問で他の方にご指導頂いたのですが誤って締め切ってしまいました。どうぞよろしくお願い致します。
画像の上に文字を表示

スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。＃マウスをのせて表示は除外。
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; } =======================

文字の前の画像を縦中央に配置したい

質問者が選んだベストアンサー

お礼 2006/06/21 14:43

関連するQ&A

画像の横にテキストを縦方向中央に配置したい

画像を縦にそろえて表示させたいのです。

画像の縦サイズが小さいと隙間が・・・

AIは使う人の年齢や市場にも影響する？人工知能の可能性

画像を縦に並べたら隙間ができることについて

画像の位置を指定するCSS

画像の配置（上下の間隔）で教えて下さい。

floatで左右に分けて配置した2個の画像の中央にテキスト

正方形のセルに縦画像、横画像を中央に配置

ボックス内中央配置特殊版

テキストと画像の縦の中央揃えの質問です

CSSで画像を左右中央に配置させたい。

画像の高さを指定するタグについて

CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

CSSで画像を中央配置（センタリング）する方法について伺います。

画像について質問です(html)

cssで一部の文字や画像を中央に寄せる方法

htmlで縦の中央揃えが上手くいきません。

cssで画像を中央に寄せる方法について

画像の上に文字を表示

CSSで画像を中央に持っていく方法。

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

文字の前の画像を縦中央に配置したい

質問者が選んだベストアンサー

お礼 2006/06/21 14:43

関連するQ&A

画像の横にテキストを縦方向中央に配置したい

画像を縦にそろえて表示させたいのです。

画像の縦サイズが小さいと隙間が・・・

AIは使う人の年齢や市場にも影響する？人工知能の可能性

画像を縦に並べたら隙間ができることについて

画像の位置を指定するCSS

画像の配置（上下の間隔）で教えて下さい。

floatで左右に分けて配置した2個の画像の中央にテキスト

正方形のセルに縦画像、横画像を中央に配置

ボックス内中央配置特殊版

テキストと画像の縦の中央揃えの質問です

CSSで画像を左右中央に配置させたい。

画像の高さを指定するタグについて

CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

CSSで画像を中央配置（センタリング）する方法について伺います。

画像について質問です(html)

cssで一部の文字や画像を中央に寄せる方法

htmlで縦の中央揃えが上手くいきません。

cssで画像を中央に寄せる方法について

画像の上に文字を表示

CSSで画像を中央に持っていく方法。

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録