画像を真ん中に

Question

お世話になります。

今までも画像を真ん中にしていたのですが、一部どうしても分からなくて伺いたいです。





 a:hover img {
 -moz-opacity:0.7;
 opacity:0.7;
 filter:alpha(opacity=70);
 }
 







  

  たっぷり6種のバスセット【 Aバスセット 】1,000円ゆったり4種のバスセット【 Bバスセット 】500円バッグ型小物

入れ【 陶器小物入れ 】2,700円


  

  木箱入り可愛いハンカチセット【 豆はんかち 】1,000円

エレガントしゃもじ入れ【アイテム入れ 】1,000円

スプーン＆ギフトBOX付【 マグカップ 】1,000円







画像3つ並びが2列で、どうしても左寄せになります。

また、画像3つのうち一番右の商品コメントが他の2つに比べて少しずれているように感じます。

こちらを改善する方法はありますか？

Answer

ECマスターズの田中です。

実際に記載されているページが見つからなかったので、

LiveWeave
http://liveweave.com/

上記サイトにいただいたソースを貼付けた結果をもとにご案内いたします。

＞画像3つ並びが2列で、どうしても左寄せになります。

左寄せになるのは、タグの文字揃えが左詰めになっていることが原因なので、
とし、中央揃えの設定にしていただけますでしょうか。

実際に記載されているページのスタイルシートの影響を受けている可能性もありますので、
もし改善されない場合は、実際に記載されているページのURLをお知らせください。

＞画像3つのうち一番右の商品コメントが他の2つに比べて少しずれているように感じます。

コメント用のHTMLソースの書き方が原因です。
コメント用のタグ内にある、およびタグを全て削除してください。

ソースの構造として、

（中略）
や
（中略）

のようになっておりますが、
前者のように、タグをタグで包んでしまうと、
表の構造が崩れる可能性があります。

表を作るタグの構造として、
表全体を示すタグの直下には行を示すタグ、その直下にはセルを示すタグ
を記載する仕組みになっておりますので、この構造を崩さないようにしてください。
（他に、表の内容を区別する、見出しを示すタグなども構造に含まれる場合があります）

また、後者のように、タグがタグをまたぐ形にすると
ブラウザが各タグの影響範囲をうまく認識できないので、
下記ページでも紹介されている通り、必ず一対になるように記載してください。
http://www.web-seed.com/skillup/update/updata-04.html

タグを完全に削除した後の空間調整は、
タグへのスタイルシート（padding, line-heightなど）で行っていただきますようお願いします。

Answer

ありがとうございます！早速試してみました！
実はこれから設定する、、、という矢先でした。

http://item.rakuten.co.jp/angelashop/jg-296-no2/

ひとつだけ貼ってみたのですが、どうでしょうか？
左側の画像に対してのコメントが左寄りになっている気がしますが、、、思っているものに決行近いので、これはこれでいい気はするのですが。

田中さんに教えて頂いた通りに出来ているでしょうか？

Answer

ECマスターズの田中です。

ご返答が遅れて申し訳ありませんでした。

確認させていただいたところ、一番左の画像（セル）については
正しく設定できておりますので、
中央・右の画像についても、ご設定いただきますようお願いします。

Answer

出来ました！ありがとうございます！