• ベストアンサー
  • すぐに回答を!

html divについて

html divについて 現在、html・CSSを勉強中です。 htmlのDivの中で画像を貼っているのですが、左端の中央に設定したいのですが、うまく行きません。 左端中央に画像を表示できる方法を教えてください。よろしくお願い致します。 ↓ html ↓ <div class="area"> <div class="area_left"> <div class="01"> : </div> <div class="02"> : </div> <div> <div class="area_right"> <div class="03"> : </div> <div class="04"> <img src=" "> </div> </div> </div> ↓ CSS ↓ div.area_right .04{ vertical-align: middle; width: 197px; height: 159px; background-image: url("area_04.gif"); }

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数102
  • ありがとう数21

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

  • ベストアンサー
  • 回答No.2
  • yyr446
  • ベストアンサー率65% (870/1330)

さらに、 vertical-align: middle; も、おそらく意図ちがいでしょう。<div class="04">内の<img src" ">を 真ん中にしようと思ったのでしょうが×です。 vertical-alignはインライン要素とテーブル要素のみで使えたはず。DIVはだめです。

共感・感謝の気持ちを伝えよう!

質問者からの補足

divではimgの位置を操作することは無理なのでしょうか? 他に何か手があれば教えていただきたいです。

関連するQ&A

  • divの入れ子が上手くいきません。

    .line { background-image: url(../img/line.gif); background-repeat: no-repeat; background-position: left bottom; display: block; padding: 0px; clear: both; width: 600px; height:auto; margin: 0px; } .left{ width:210px; height:90px; float:left; text-align:center; padding:10px 5px 10px 0px;} .right{ width:360px; height:90px; float:left; padding:10px;} <div class="line"> <div class="left">あああ</div> <div class="right">いいい</div> </div> 上記のようにlineでleftとrightを内包したいのですが、IEでは表示されるのですが、fox・safariで確認すると画像が消えてしまいます。 どうもdivで括っているせいかline内に文字が入っていないと認識されているようで、ためしに適当な数字を入れてやると認識されました。 また、lineのheightをpx指定してやると表示されるのですが、lineは使いまわしたいクラスなので、縦を固定することができません。 どうしたら解決しますか?

    • ベストアンサー
    • HTML
  • CSS:文字の上下の中央揃え

    h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか? 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "MS ゴシック"; background-color: #88ceff;}

    • ベストアンサー
    • HTML
  • [携帯]divで指定した背景色から画像がはみ出す。

    携帯用サイトを制作しているのですが、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは </div> <div style="clear:both;~ と画像の横に文字が回りこんだとき、背景色が文字の部分にしかつかず、画像がはみ出した状態になってしまいます。 今回は1*1の透明なgif画像を使い、 <div style="clear:both;background-color:red;">    <img src="./images/icon.gif" width="64" height="64" align="left" style="vertical-align:middle;float:left;margin:5px;" />    <br />こんにちは       <div clear="all" style="clear:both;">          <img src="./images/space.gif">       </div> </div> <div style="clear:both;~ とすることで解消できたのですが、 参考にしていたサイトではどうやら画像を使わずに背景内に収めているようです。 後学のために、画像を使わず、背景から画像をはみ出さないように見せる方法を教えてください。よろしくお願いします。 docomoで動作確認しています。

その他の回答 (1)

  • 回答No.1
  • zeff
  • ベストアンサー率69% (137/198)

まずclass名は数字から始めてはいけません(数字のみは当然アウト)。 背景画像位置は background-positionで指定します。 左端中央なら background-position:left center; 1枚だけでしょうから、 background-repeat:no-repeat; も。繰り返さないの意。

共感・感謝の気持ちを伝えよう!

質問者からの補足

アドバイスありがとうございます。 class名が数字のみはアウトだと知りませんでした。 自分の説明不足でした。 <div class="04>の中にある<img>の位置を変更したいと思っています。

関連するQ&A

  • IEとFirefoxでの背景表示の違いについて (CSS)

    いつもお世話になっています。 CSSで枠(text_area)を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか? よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ:456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }

    • ベストアンサー
    • CSS
  • 画像をボックスの中心に位置付けたい…

    ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • DIV内の padding について

    下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px 有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか? よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }

    • ベストアンサー
    • HTML
  • 2つのDIVを中央と右に横並びにしたい

    いつも大変お世話になっております。 wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。 Topというdivの中に「logo」と「social」という2つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、 横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。 是非どなたかご教授いただけますと、非常に助かります。 <div id="top"> <div id="logo"></div> <div id="social"> <div class="fb"></div> <div class="twitter"></div> </div> </div> #top { height: 36px; } #logo { background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto; height: 36px; width: 397px; } #social { float:right; height: 36px; width:56px; } #social .fb { background-image: url(images/fb.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; } #social .twitter { background-image: url(images/twitter.png); background-repeat: no-repeat; padding-right: 3px; height: 26px; width: 25px; float:right; }

    • ベストアンサー
    • CSS
  • CSSのpositionでフッターが最下に配置されてくれない

    CSSの配置がどうにもうまくいきません。 フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか? WindowsのIE6やFirefoxではOKなんですが・・・・・ 以下、ソースです。 ●CSS ------------------------------------------------------ div#hdr-wrap { position:absolute; background:url(../img/cmn/hdr_bg.gif) repeat-x; top:0px; width:100%; height:120px; text-align:center; } div#hdr { width:900px; _width: 902px;/*IE対策*/ height:120px; margin-left: auto; margin-right: auto; text-align: left; } div#hdr-vi{ padding-top:71px; padding-left:0px; } div#gbnavi-wrap { position: absolute; background:url(../img/cmn/gbnv_bg.gif) repeat-x; top: 120px; width:100%; height: 51px; text-align:center; } div#gbnavi { width: 900px; _width: 902px;/*IE対策*/ top: 120px; height: 51px; margin-left: auto; margin-right: auto; text-align: left; } div#main-wrap{ position: absolute; top:171px; width:100%; height:100%; background: url(../img/cmn/bg_cts_sdw.gif) repeat-x; text-align:center; } div#main{ position: static; padding-top:0px; width: 900px; _width: 902px;/*IE対策*/ height:100%; margin-left: auto; margin-right: auto; text-align: left; } div#ftr-wrap { clear: both; background:url(../img/cmn/ftr_bg.gif) repeat-x; width:100%; height:151px; text-align:center; } div#footer{ clear: both; color: #415880; width: 900px; _width: 902px;/*IE対策*/ height:151px; margin-left: auto; margin-right: auto; text-align: left; } ------------------------------------------------------ ●以下、HTMLソースです ------------------------------------------------------ <div id="hdr-wrap"> <div id="hdr"> <div id="hdr-vi">コンテンツ入る</div> </div> </div> <div id="gbnavi-wrap"> <div id="gbnavi"> <ul> <li>コンテンツ入る</li> </ul> </div> </div> <div id="main-wrap"> <div id="main"> <!--RIGHT AREA--> <div id="right">コンテンツ入る</div> <!--/RIGHT AREA--> <!--LEFT AREA-->     コンテンツ入る。サイドバーが。 <!--/LEFT AREA--> <!--/MAIN AREA--> <!--/MIDDLE AREA--> </div> <!--FOOTER AREA--> <div id="ftr-wrap">コンテンツ入る</div> <!--/FOOTER AREA--> </div> ------------------------------------------------------ なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。 宜しくお願いいたします。

  • 文章を、画像の縦方向の位置の中心に置きたい

    CSSを使ってwebページのレイアウトをしています。 画像の高さの真ん中あたりに、文章を配置したいのですが、方法を教えてください。 「vertical-align:middle;」で指定してみたら1行の文ではうまく行ったのですが、複数行になるとうまくいきません。 どうすれば、複数行の文章で上手く指定できるでしょうか。 [ソース] <style> .test{ width:530px; height:263px; background-color:#ffcccc; font-size:10pt; } img{ vertical-align:middle; } </style> <div class="test"> <p> テキスト<br> テキスト<br> テキスト<strong>テキスト</strong>テキスト<br> <img src="画像のURL"width="250" height="259" alt="画像の名前"> </p> </div>

    • ベストアンサー
    • CSS
  • ボックス内中央配置特殊版

    <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
  • CSSで3分割した背景画像を配置したいけど隙間が出来てしまう?

    初めて質問させていただきます。 当方はCSS初心者です。 画像(グラデーションのある角丸四角枠)を3分割し、それを背景画像として配置したいのですが、WinIE6などで表示するとどうしても画像に隙間ができてしまうのです。 IE7、FireFoxでは無事に希望通りに表示されています。 【HTML】 <div id="wrapper"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> 【CSS】 #wrapper{ width:680px; height:auto; border:0 auto; padding:0; } .top{ width:650px; height:10px; background-image:url(img/01.gif); background-position:top center; background-repeat:no-repeat; margin:0 auto; padding:0; } .middle{ width:650px; background-image:url(img/02.gif); background-repeat:repeat-y; margin:0 auto; padding:0; } .bottom{ width:650px; height:13px; background-image:url(img/03.gif); background-repeat:no-repeat; background-position:bottom center; margin:0 auto; padding:0px; } といった感じで、ざくっとwrapperの中に背景画像をセンターで敷きたいのです。 .topと.middleの間には隙間は出来ないのですが、.middleと.bottomの間に数pxの隙間が出来てしまうのです。 制作環境はDreamweaver8、MAC/OSXですが、動作確認はWin/XPでも行っています。 何卒ご教示下さい。

  • CSSでセル高さを固定して縦中央にテキストに配置する方法(DW上でも)

    .th01{ background-color: #000066; color: #FFFFFF; font-size: 14px; font-weight: bold; background-image: url(../images/back01.gif); background-repeat: repeat-x; vertical-align : middle; height: 28px; } うまく縦中央に表示されるのですが、DW上ではうまく中央に表示されずに上にいってしまいます。これは仕様なのでしょうが、そもそもDWにはCSSで縦中央を指定する項目は無いのでしょうか?

  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS