CODEWITHSUNDEEP
htmlcssgallery
Forgoraren
Forgoraren

Reputation: 33

How do I center my image gallery on a page?

I am trying to create an image gallery using HTML and CSS but I have some trouble making the gallery appear in the middle of the page. As of now the images (grey boxes in picture) are to far to the left. I would like the whole gallery to be centered on the page. Any help with this would be much appreciated!

Screenshot

#content {
  overflow: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #6b88f2;
}

.gallery {
  min-height: calc(100vh - 200px);
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 1rem;
  background-color: #ec6e52;
}

.cell {
  margin: 0.5rem;
}

.cell img {
  display: block;
}

.responsive-image {
  max-width: 100%;
}

@media screen and (min-width: 600px) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .cell {
    width: calc(50% - 5rem);
  }
}

@media screen and (min-width: 1000px) {
  .cell {
    width: calc(33.3333% - 5rem);
  }
}
<div id="content">

  <div class="gallery">

    <div class="grid">

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

      <div class="cell">

        <img src="bilder/test.png" alt="OS" class="responsive-image">

      </div>
      <!--End cell  -->

    </div>
    <!--End grid  -->

  </div>
  <!--End gallery  -->

</div>
<!--End content  -->

Upvotes: 3

Views: 1037

Answers (1)

StefanBob
StefanBob

Reputation: 5128

I would just put text-align: center on .grid, knowing that it will trickle down

Or you can use flexbox which will give you an easier time overall:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

Upvotes: 2

Related Questions