- ベストアンサー
CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- HTML
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
すみません。最新のブラウザでしか確認していませんでした。 まず判ったことを。 １．2つ目で回答したものではどのブラウザでも期待通りに表示されませんでした。 ２．画像とテキストを並べると、InternetExplorer 以外のブラウザでは期待通りに表示されました。 ３．１.の場合の html を xhtml で書き直すと、InternetExplorer6, 7 以外のブラウザでは期待通りに表示されました。 どの場合も完璧ではありませんでした。ごめんなさい。 もし面倒でないなら次のような方法があります。 この方法ならInternetExplorer6 以降のブラウザなら期待通りに表示できると思います。 #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { width: 800px; } .left-img { float: left; width: 400px; height: 350px; text-align: center; overflow: hidden; } .caption, .left-img img { position: relative; top: 50%; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> </head> <body id="photo"> <div class="image"> <p class="left-img"> <img src="image1.jpg" style="margin-top: -**px;"><br> <span class="caption">aaa</span> </p> <p class="left-img"> <img src="image2.jpg" style="margin-top: -**px;"><br> <span class="caption">bbb</span> </p> <p class="left-img"> <img src="image3.jpg" style="margin-top: -**px;"><br> <span class="caption">ccc</span> </p> <p class="left-img"> <img src="image4.jpg" style="margin-top: -**px;"><br> <span class="caption">ddd</span> </p> </div> </body> </html> ** には画像の高さの半分の値を入れます。 画像の高さは、画像アイコンにマウスカーソルを重ねるか、画像のプロパティの概要を詳細表示にすると確認できます。
その他の回答 (4)
- syagain
- ベストアンサー率54% (42/77)
邪道ですが、<p>に背景画像の設定をしてはいかがでしょうか。 background-position:center;なら、簡単に中央に画像を持って来れます。 fixed,no-repeatなどだけCSSで指定し、 画像のURLだけ逐一、HTMLで<p style="background-image:url(001.jpg);">とすれば、ご希望の通りのデザインにはなると思います。 （ただテキストの配置はまた工夫が必要になりますが） (CSS) #photo { margin:0px 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image{ width: 800px; } .left-img{ background-position:center; background-repeat:no-repeat; width: 400px; height: 350px; float:left; } (HTML) <body id="photo"> <div class="image"> <p class="left-img" style="background-image:url(001.jpg);"></p> <p class="left-img" style="background-image:url(002.jpg);"></p> </div> <div class="image"> <p class="left-img" style="background-image:url(002.jpg);"></p> <p class="left-img" style="background-image:url(001.jpg);"></p> </div> </body>
お礼
ありがとうございます。 出来るだけ正当な手段で作りたかったのですが、正当に手っ取り早く、というのは無理なようなので、背景にしてしまうという案を使わせていただく事にしました。 テキストの配置は下のような感じで対処してみました。 #photo .txt1{ font-size : 0.9em; padding : 0; margin: 0 auto; width : 800px; border-bottom:1px solid #ffffff; } #photo .txt2{ font-size : 1em; padding:0 0 0 30px; margin:0; text-align: left; color:#69788A; float:left; width:400px; } #photo .txt3{ font-size : 1em; padding:0 0 0 30px; margin:0; text-align: left; color:#69788A; float:right; width: 400px; }
- k0021
- ベストアンサー率26% (32/120)
<p class="right-img"><img src="017.jpg" border="0"></div>を <p class="left-img"><img src="017.jpg" border="0"></div>に変更したら
- oilfield
- ベストアンサー率50% (1/2)
<div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="left-img"><img src="017.jpg" border="0"></p> </div> .image { width: 800px; } .left-img { float: left; width: 400px; height: ***px; line-height: ***px; text-align: center; overflow: hidden; } .left-img img { vertical-align: middle; } 上記の説明を少し。 画像の入っているボックスの幅が400pxということなのでp要素は width: 400px; ですね。 次に画像を中央に揃えるために text-align: center; とします。 次に縦に並んでいるp要素を横に並べるために float: left; とします。 p要素の高さ（img要素の高さ）が違うと段々になって、うまく並ばないと思うので、p要素に画像のおおよその高さを height: ***px; と指定します。（もし画像がp要素より大きくなったときのために、p要素には overflow を指定して溢れ出したときの動作を指定しています。） div要素の幅が 800px なので、p要素が一行に二つずつ並ぶはずです。 次に画像を行の垂直中央に揃えるためにimg要素に vertical-align: middle; とします。 このままでは画像は上に揃ったままなので p要素内の行の高さを指定します。（p要素の高さと行の高さは違うようです。） 行の高さは line-height: ***px; と指定します。このときの値は p要素の高さと同じにします。 これで line-height の垂直中央に 画像が揃ったと思います。 補足です。 画像の溢れ出しに対処するために overflow を使用していますが、画像の溢れ出した部分は隠れてしまいます。 なので大きな画像を使う場合、img要素に width属性か height属性のどちらか片方を指定することをお勧めします。（片方だけ指定するのは画像の縦横比を保つのが楽なためです）
お礼
教えていただいたとおりにやってみましたが、垂直中央にそろいませんでした。 他の部分が影響しているのかと思い、余分なところはすべて削除したのですが… タグは以下の通りです。 #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { width: 800px; } .left-img { float: left; width: 400px; height: 350px; line-height: 350px; text-align: center; overflow: hidden; } .left-img img { vertical-align: middle; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="001.jpg" border="0"></p> <p class="left-img"><img src="002.jpg" border="0"></p> </div> <div class="image"> <p class="left-img"><img src="002.jpg" border="0"></p> <p class="left-img"><img src="001.jpg" border="0"></p> </div> </body> </html>
- oilfield
- ベストアンサー率50% (1/2)
できるだけ変更箇所が少なくなるように説明します。 まず、 <p class="left-img"><img src="016.jpg" border="0"><img src="017.jpg" border="0"></p></div> こうして、 .left-img img { vertical-align: middle;} こうですね。 このとき img 要素を改行しないでください。余計な空白が入ります。 <img …> <img …> とせずに、 <img …><img …> とします。 画像の横に余白を空けたければ css の margin プロパティを使います。 .left-img img { margin-right: 5em; margin-right: 5em; } 次の css は不要です。 .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } 質問に直接関係ありませんが、float: center; という記述は間違いです。 中央に揃えたければ、margin: 0 auto; とします。
お礼
ありがとうございます。 ただ、これだと縦の画像が並んだときにずれてしまいました。 捨てサイトですが、URLを乗せますので、ご覧ください。 横に二つならんだ幅400pxのボックスそれぞれの中心に画像を配置させたいのです。 http://site.siromuku.com/index.html
関連するQ&A
- 背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を
背景画像をCSSで中央に指定し、さらにその背景画像の中に違う画像を 位置指定したいのですが、うまく反映されませんでした。 「 background-position: center center; 」「 background-position: center center; 」 がCSS側での背景画像位置指定と多くヒットしたのですが、反映はされませんでした。 「 margin-left: 80px; 」を指定したところ、画面中央に位置が反映されたのですが 画面サイズを１０２４×７６８から１２８０×１０２４に変更すると 中央から左寄りにずれてしまいます。 下記に実際のソースを記載致しますので、どなたか解る方がいらっしゃいましたら アドバイスの程宜しくお願いいたします。 － 画面サイズを変更すると位置がずれてしまうソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img.jpg); margin-left: 80px; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ---------------------------------- － HTML － <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>img</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body"> <div id="img"> <div id="img2"><img src="img_1.gif" width="50" height="30" border="0" /> <img src="img_2.gif" width="50" height="30" border="0" /></div> </div> </body> </html> ------------------------------------------- － 検索でヒットした位置指定のソース － @charset "utf-8"; #img { width: 700px; height: 125px; background: url(img_2.jpg); background-position: center center; background-repeat: no-repeat; } #img #img2 { float: right; margin-right: 0px; margin-left: 30px; margin-top: 59px; margin-bottom: 0px; } ------------------------------------------- － HTMLは上記と同じ －
- ベストアンサー
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- XHTML+CSS 画像を中心（上下の）に配置したい
基本部分と思うのですが、下記の記述でどうしても中心にならず、躓いております。 「中心にしたい画像」を800pxの枠内の中央（上下）に置きたい為、 上下の余白を19pxとっているのですが、画像が下寄りになってしまいます。 動作確認はMac：safari3.0 Fire Fox2.0 です。 どなたか教えて下さい。よろしくお願い致します。 ------------------------- 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <style type="text/css" media="all"> <!-- @import url("test.css"); --> </style> </head> <body> <div id="navi"> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> </div> </body> </html> ------------------------- 【CSS】 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; margin: 0px; float: left; }
- ベストアンサー
- HTML
- cssが反映されません・・・
HP初心者です。現在ホームページビルダーで編集してます。 もともとあるHPを引き継いで編集しているのですが、2カラムcssに挑戦しました。http://css.uka-p.com/index_2column.shtml やってみたのですが、反映されません。プレビューにするとエラー検出になり、強制的に<body>以下に位置づけられて、ただのテキストとしてHP上にずらずら文字が出てきてしまいます。左右も反映されてません。 ちなみに、こんな感じで書き込みました。 <head> <meta name="ROBOTS" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="style.css" type="text/css" /> body {text-align:center; } outline { width:600px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .contents{width:350px;float:left;} .menu{width:240px;float:right;} .c-both{clear:both;} </head> link以下のbodyからが私の書き込みです。 宜しくお願いします。
- 締切済み
- HTML
- 初心者です 画像横に文字を入れたい ｃｓｓ
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSでfloat指定した画像に隙間
floatの指定をすると並べた画像に隙間ができます。 div aで外を囲み、幅を400px固定し、 その中にli(幅200px）を放り込んでいます。 （幅400pxの入れ物に200pxの小箱を2列に並べていく） 画像をfloatさせなければ隙間は出ないのですが、下記cssのようにfloatさせると幅400pxにIEだけ収まりません。 WinXP・irefox1.0やOpera7.5では意図通り表示されます。。 どなたか解決策お持ちの方よろしくおねがいします。 <html> <head> <title></title> <style type="text/css"> <!-- #a{ width:400px; margin: 0 auto; padding:0; } li{ width:200px; padding:0; list-style:none; float:right; display: inline; } img{ border:none; margin:0; padding:0; vertical-align:top; float:left; ←これの有無で不具合 } --> </style> </head> <body> <div id="a"> <dl> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="100" /><img src="xxx.jpg" width="50" height="100" /></li> <li> <img src="xxx.jpg" width="150" height="200" /><img src="xxx.jpg" width="50" height="200" /></li> </dl> </body> </html>
- ベストアンサー
- HTML
- CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。 なんでかまったくわかりません（ToT） 教えてくださいｍ（＿＿）ｍ 【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
- 【Html CSS】<a>の上に文字を配置したい
添付の画像の様にしたいです。 一番左には「ＳｏｌｄＯｕｔ」って文字が一番上に配置されてます。 （この状態でhoverも<a>のリンクも効かせたい） 以下は、ソースです。これを添付の画像の様にしたいです。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; vertical-align: middle; } .box li{ float: left; list-style:none; } .box .out{ border-right: 10px solid #fff; border-top: 10px solid #fff; } .box a { text-align: center; display: block; text-decoration: none; font-weight: bold; color: #69380f; background-color: #f2f2f2; width: 100px; height: 120px; } .box a:hover{ background-color: #ccc; } </style> </head> <body> <ul class='box'> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> <li><div class='out'><a href='javascript:void(0);'>hoge<br><img src='shop.cgi?img=1'><br>300円</a></div></li> </ul> <br> </body> </html> 以上、ご指導の程、宜しくお願いいたします。
- ベストアンサー
- CSS
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
お礼
色々教えていただきありがとうございました。 無精者なので手っ取り早い方の背景に、という案を使わせていただく事にしました。