画像を２カラムで中心に寄せる

Question

複数枚の写真を2列（２カラム？）で中心線に寄せて表示したい。

  <main>
    <div class = "works">
      <img src = "shawn.jpg" alt="picure"/>
    </div>
    <div class = "works">
      <img src = "shawn.jpg" alt="picure"/>
    </div>
    <div class = "works">
      <img src = "shawn.jpg" alt="picure"/>
    </div>
    <div class = "works">
      <img src = "shawn.jpg" alt="picure"/>
    </div>
  </main>

main{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  display:flex;
  flex-wrap:wrap;
  justyify-content:center;
  align-items: center;
}
main div.works{
  width:calc(50%-10px);
  margin:5px;
}
#works img{
  width:100%;
}

いろいろなサイトを廻ってみて、いろいろ足したりしましたが自力では解決できなそうなので、ご教授ください。

Answer 1

calcの書き方繊細だから…スペース入れないと。あと「justify-content」ね。

main div.works{
  width:calc(50% - 10px);
  margin:5px;
}

Comments

[yshk0402]

解決しました！ありがとうございます！！