画像と文字が揃わない

Question

ご指摘ありがとうございます。内容編集しました。
分かりやすいように、productのbackgroundを灰色にして見てます。
画像が、灰色の背景、左端にぴったりくっついて欲しいのですが、右側に寄ってしまいます。

  <div class="product-wrapper">
    <div class="container">
      <div class="heading">
        <h2>PRODUCT</h2>
        <a href="#" class="btn more">MORE</a>
      </div>

      <div class="products">

        <div class="product">
          <a href="#">
            <div class="product-icon">
              <img src="paspol_images/fes001t.png">
            </div>
            <div class="products-info">
              <p>The World Festival Guide - 海外の音楽フェス完全ガイド -</p>
            </div>
          </a>
        </div>

        <div class="product">
          <a href="#">
            <div class="product-icon">
              <img src="paspol_images/banner_21.png">
            </div>
            <div class="products-info">
              <p>この世界で死ぬまでにしたいこと2000</p>
            </div>
          </a>
        </div>

.container {
  width: 812px;
  margin: 0 auto;
}

.product-wrapper{
  height:1215px;
}

.product{
  height:450px;
  width:180px;
  margin-right:80px;
  background-color: gray;
  float: left;
}

.product:hover{
  opacity: 0.8;
  transition: all 0.3s;
}

.product-icon{
  float: left;
  width: 200px;
  height:280px;
  margin: 0;
}

.product-icon img{
  width: 200px;
  height:280px;
}

.product p{
  color: #13191B;
  padding:35px 0 165px 0;
  font-weight: bold;
}

Comments

[kei344]

（質問文は編集できます）HTML/CSSは単体の要素に対する指定ではなく、別のCSS指定や要素の位置関係も影響するため、全体を質問文に提示してください。また、「ずれ」についてはスクリーンショットなどの提示をお勧めします。

[new1ro]

提供してもらったソースコードでは、揃っているように見えます。
↓以下、試してみました。
https://codepen.io/new1ro/pen/abdxBzz

> 画像と文字を揃えたいのですがどうしても揃いません。
以下のうちどれでしょうか?
1. 左端を揃えたい
2. 中央揃えにしたい
3. 右端揃えにしたい
4. 上端揃えにしたい
5. 上下中央揃えにしたい
6. 下端揃えにしたい
7. それ以外

----
おそらく、こちらに書いていないソースコードの影響もあるのではないかと思われます。

[_arukuneko]

nex1roさん
１の左端に揃えたい　です。

[new1ro]

↓更新しました。やはり左端はきれいに揃っているので、
提供されたソースコードでは、まだ不足しているのではないかと思われます。
https://codepen.io/new1ro/pen/abdxBzz

Answer 1

new1roさんの指摘どおり問題が再現しないため、元画像に透明が含まれていたりしませんか？
スクリーンショットの画像右部分に影がありますが、その透明部分も含めた画像なのでは。

Answer 2

↓こちらで試してみました。左端が揃っており、おそらく提供していただいているソースコードでは不足していると思われます。

https://codepen.io/new1ro/pen/abdxBzz

---

推測として、以下回答してみます。

.product-iconか.product aに、paddingが指定されているのではないかと思われるので、確認してください。

そのpaddingを削除するか、以下のようにmarginにマイナス値を指定して調整してください。

.product-icon {
  margin-left: -20px; /* 数値を指定して、調整してください。 */
}

Comments

[_arukuneko]

確かに透明部分含めた画像かもしれないです・・・

marginをマイナスで指定する方法で解決できました！ありがとうございます！