画像が真ん中に来て画像と商品説明の間が空かない

CSS初心者です。Wordpressでwidth: 150px; height: 250pxのフレームの中にASPの商品が入るようにURLを入力するのですが、画像幅が150px未満の画像は左によって商品画像と商品の説明文の間には１行の空きが入ってしまいます。理想は画像がフレームの真ん中に来て画像と商品説明の間が空かないようにしたいと思っています。ネットで調べて<center><img src="画像のURL"></center>と<p style="margin-bottom: 0px;">の2つのコードを使用したのですが、片方ずつの使用は効果があるのですが、両方使うと１行の空きができたままになってしまいます。すみませんがどこを編集すればよろしいのかお詳しければよろしくお願いいたします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/02/27 10:35

質問を整理してください。

＞width: 150px; height: 250pxのフレームの中に
　<iframe>ということですか？それだと読み込まれるHTML側で指定。
＞画像がフレームの真ん中に来て画像と商品説明の間が空かないようにしたいと思っています。
　マージンを消せば消えるはず
＞画像幅が150px未満の画像は左によって商品画像と商品の説明文の間には１行の空きが入ってしまいます。
　一行と言うと上下の間隔です。左によるという現象と合わない
＞<center><img src="画像のURL"></center>
　centerはいくらなんでも使うべきじゃない。

[例]
<div id="productList">
　<ul>
　　<li><img src="" width="" height="" alt="">
　　　　<dl>
　　　　　<dt>商品名</dt>
　　　　　<dd>扇風機(青)</dd>
　　　　　<dt>価格</dt>
　　　　　<dd>5,000</dd>
　　　　　<dt>説明</dt>
　　　　　<dd>音の静かな床置きタイプ</dd>
　　　　</dl>
　　</li>
　　<li><img src="" width="" height="" alt="">
　　　　<dl>
　　　　　<dt>商品名</dt>
　　　　　<dd>扇風機(赤)</dd>
　　　　　<dt>価格</dt>
　　　　　<dd>5,000</dd>
　　　　　<dt>説明</dt>
　　　　　<dd>音の静かな床置きタイプ</dd>
　　　　</dl>
　　</li>
　　<li><img src="" width="" height="" alt="">
　　　　<dl>
　　　　　<dt>商品名</dt>
　　　　　<dd>扇風機(黒)</dd>
　　　　　<dt>価格</dt>
　　　　　<dd>5,000</dd>
　　　　　<dt>説明</dt>
　　　　　<dd>音の静かな床置きタイプ</dd>
　　　　</dl>
　　</li>
　</ul>
</div>
とかでしたら、画像スペースを150px×150px確保するか、画像の縦サイズに合わせて説明部分を伸縮させるかになるでしょうね。画像サイズごとに位置を指定しても良いでしょう。

この回答へのお礼

単語を調べながら教わったコードを参考にしてそれらしいコードをコピーしたり削除したりしていったら、なんとか(何故か？)できるようになりました。おかげさまで助かりました。ありがとうございました。

お礼日時：2014/03/02 01:42