テキストと画像の縦の中央揃えについて
- テキストと画像の縦の中央揃えについて調査中です。現在、<dd>タグの中でテキストリンクと画像を縦に中央配置する方法について試行錯誤していますが、各ブラウザでの表示がばらつくため、一貫した表示方法を見つけることができません。
- テキストと画像を縦に中央揃えするためには、<dd>タグに対して適切なCSSを指定する必要があります。しかし、現在の試行では各ブラウザで均一な表示が得られていません。
- テキストと画像の縦の中央揃えを実現するためには、<dd>タグの高さ、フォントサイズ、<img>タグのサイズなど、要素のサイズを適切に設定する必要があります。しかし、現在の試行では一貫した表示が得られていません。
- ベストアンサー
テキストと画像の縦の中央揃えの質問です
下記の参考サイトのサイトマップをホームページ作成の練習として作成中です 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、ｃｓｓを指定すれば各ブラウザで均一に表示されるでしょうか？
- tutton
- お礼率88% (16/18)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
line-heightは試されましたか？ どうしても無理なら画像の高さを26pxにするのも手です。
関連するQ&A
- 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
- 画像の横にテキストを縦方向中央に配置したい
画像の右側にテキストを縦中央揃えにしたく、下記のように記述しました。 <style type="text/css"> img {height:100px; vertical-align: middle; } h3{display:inline;} </style> <img src="画像.jpg"> <h3>タイトル</h3> タイトルが短いときはよいのですが、長くなると2行目が画像の下段にいってしまいます。 このHTNLの記述では無理でしょうか？
- ベストアンサー
- CSS
- DreamweaverＣＳ４で、テキストの縦の中央揃えを指定する場合、
DreamweaverＣＳ４で、テキストの縦の中央揃えを指定する場合、ＣＳＳルール定義で、どこを指定するか教えて頂けないでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 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> 何か間違えているでしょうか？ それとも、テキスト以外は揃わないのでしょうか？
- 締切済み
- HTML
- 中央寄せに対するabsolute配置
中央寄せされたページの右上あたりに画像を配置したいのですが、 重要でないものなのでHTMLの下のほうに書いています。 普通に position:absolute; で持ち上げると、画面左上が基準であるためモニターサイズによって中央寄せ部分との位置関係が狂ってしまいますよね？ かといってmarginにマイナスを指定したくありません。 そこで、画像の入った要素を最上部(top:0px)の中央(left:50%)に絶対配置し、そこからimgを絶対配置でleft:100pxのように右に動かしてみました。 IEやFirefox、Opera、Chromeなど、思いつくブラウザで見たところ問題ないのですが、Dreamweaver CS4のライブビューで見るとずれています。 たしかWebkitがエンジンだったと思うのですが、もっと賢いやり方はありませんか？
- ベストアンサー
- HTML
- CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ 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
- 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
- 画像の中央横にテキストを表示したい
Dreamweaverでホームページを作っています。 30×30ピクセルほどの小さな画像のとなりにテキストを表示させたいのですが、デフォルトだと画像の下側に合わさってしまいます。 そこで、imgに対するalignオプションで"middle"を指定しました。 ところが、それだと上方に位置されてしまいました。 一体どうすれば、画像とテキストの中央が合ってくれるようになるのでしょうか？ ご存知の方、どうかお教え願えますでしょうか？
- ベストアンサー
- HTML
- CSSでロールオーバーを作って中央揃えにしたい。
CSSを使ってロールオーバーを作成しました。 がんばっているのですが、なかなか難しく、壁ばかりです。 なんとか、ロールオーバーは出来たのですが、その画像が左揃えになっていて、中央揃えにならないのです。 どなたか、お力をお貸しください。よろしくお願い致します。 HTML ----------------------------------- <link href="css.css" rel="stylesheet" type="text/css"> <div class="contents_box2"> <h3 class="no"><a href="info.html"><img src="contents_img2_1.jpg" alt="教室のご案内" width="215" height="53" /></a></h3> <p class="contents_text2">ああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2">あああああああああああああああああああああああああああああああああああああああああああああああああああああああ <p class="contents_text2"><br /> <div class="rollover01"><a href="info.html"><img src="button2.jpg" alt="詳しくはこちら" width="172" height="29" /></a></div> <img src="contents_img2_3.jpg" width="215" height="18" /></div> -------------------- css↓↓↓ ------------- BODY { COLOR: #666666; TEXT-ALIGN: center; margin-top: 0px; font: 12px/130% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } IMG { BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; margin: 0px; padding: 0px; } .contents_box2 { FLOAT: left; MARGIN: 0px 12px 0px 0px; WIDTH: 215px; TEXT-ALIGN: left; padding: 0px; background: url(contents_img2_2.jpg) repeat-y; } .contents_text2 { MARGIN: 10px 16px 0px } .contents_detail { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 215px; PADDING-TOP: 0px; TEXT-ALIGN: center } .rollover01 { width:172px; height:29px; background:url(img/button3.jpg) no-repeat center bottom; text-align: center; } .rollover01 a { display:block; width:172px; height:29px; font-size:1px; line-height:1px; outline:none; text-align: center; } .rollover01 a:hover { text-indent:-9999px; } -------------------------------------
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
はい、試しました。 26pxでやったのですが、firefoxで<img>の上に隙間ができてしまいます。 結局、*htmlハックを使って、<img>に上下にパディング入れて、26px にして、やりました。 微妙に各ブラウザでずれるのですが、まぁ しゃあないかって感じです。 回答ありがとうございました。