- ベストアンサー
画像が真ん中に来て画像と商品説明の間が空かない
- CSS初心者の質問です。Wordpressで商品画像がフレーム内に収まるようにURLを入力していますが、画像幅が一定以上の場合には画像の左側に１行分の空白が入ってしまいます。画像をフレームの真ん中に配置し、商品説明との間に余白を設ける方法を教えてください。
- Wordpressで商品画像がフレーム内に収まらず、画像の左側に１行分の空白が入る問題について質問です。現在、<center>タグと<p style='margin-bottom: 0px;'>タグを使用しているのですが、両方を使用すると空白が発生してしまいます。画像をフレームの真ん中に配置し、余白をなくす方法を教えてください。
- CSS初心者の質問です。Wordpressで商品画像をフレーム内に収めながら、画像の左側に１行分の空白が生じてしまいます。画像を中央に配置し、余白をなくす方法を教えてください。
- interpretation
- お礼率100% (4/4)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問を整理してください。 ＞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確保するか、画像の縦サイズに合わせて説明部分を伸縮させるかになるでしょうね。画像サイズごとに位置を指定しても良いでしょう。
お礼
単語を調べながら教わったコードを参考にしてそれらしいコードをコピーしたり削除したりしていったら、なんとか(何故か？)できるようになりました。おかげさまで助かりました。ありがとうございました。