htmlcsscenterphoto

Centering a photo

enter image description here

Hey, I'm not sure how to center this photo. It is slightly offset as you can see and I would like to make a few divs side by side with breaks and add the photos but unfortunately they are not perfectly centered.

I would appreciate some advice for the future on how to center images well in the css file.

.Photos {
  color: black;
  display: table;
  width: 100%;
  height: 450px;
}

.photo1 {
  display: inline-block;
  width: 25%;
  height: 450px;
  background-size: cover;
  margin-left: 30px;
  background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
}
<section class="Photos">
  <div class="photo1">fsgfsd</div>
</section>

Solution

  • use background-position: center;

    .Photos {
  color: black;
  display: table;
  width: 100%;
  height: 450px;
}

.photo1 {
  display: inline-block;
  width: 25%;
  height: 450px;
  background-size: cover;
  margin-left: 30px;
  background-image: url(https://optimagas.com/blog/bl-content/uploads/pages/e931fad50039f497fa1b5438c6cd89c9/gazziemny.jpg);
  background-position: center;
}
    <section class="Photos">
  <div class="photo1">fsgfsd</div>
</section>