CODEWITHSUNDEEP
htmlcsscenter
paerrr
paerrr

Reputation: 23

How do I center an image gallery in CSS?

I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.

 <div class="gallery">
     <a target="_blank" href="Icon_pyro.jpg">
      <img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
     </a>
   <div class="desc">Pyro</div>
 </div>

With my CSS classes being

div.gallery {
    display: block;
    margin: 0 auto;
    text-align: center;
  }

  div.gallery img {
    margin: 5px;

  }

It shows up stacked on top, I am stumped on how to make them side by side

Current webpage

Upvotes: 2

Views: 1368

Answers (3)

HappyHands31
HappyHands31

Reputation: 4101

It sounds like you will want to wrap the images using flex to get them side by side.

In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.

.gallery-wrapper {
  display: flex;
  justify-content: center;
}
<body>
<div class="gallery-wrapper">
  <div class="gallery">
    <a target="_blank" href="Icon_pyro.jpg">
      <img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
    </a>
    <div class="desc">Pyro</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_scout.jpg">
      <img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
    </a>
    <div class="desc">Scout</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_spy.jpg">
      <img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
    </a>
    <div class="desc">Spy</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_soldier.jpg">
      <img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
    </a>
    <div class="desc">Soldier</div>
  </div>
</div>
</body>

Upvotes: 1

Kevin
Kevin

Reputation: 113

You can use display:flex property to fix your problem.

I will give you some Idea........................

horizontally center

if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.

.html

<div class="imageContainer">
  <div class="img">
    <img src="https://via.placeholder.com/256x256">
  </div>
  
  <div class="img">
     <img src="https://via.placeholder.com/256x256">
  </div>
  
  <div class="img">
    <img src="https://via.placeholder.com/256x256">
  </div>
</div>

.css

.imageContainer{
  display:flex;
  justify-content:center;
}

.img{
  margin:5px;
}

jsFiddle example

Vertically center

You have to only add align-items: center; and min-height: 100vh;

  .imageContainer{
      display: flex;
      align-items: center;
      min-height: 100vh;
   }

jsFiddle Example

horizontally and vertically Center.

just add (here has both above css propertise. have a look and get the idea)

.imageContainer{
   display:flex;
   justify-content:center;
   align-items:center;
   min-height:100vh;
}

jsFiddle Example

As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)

.imageContainer{
   display:flex;
   align-items:center;
   min-height:100vh;
   flex-direction:column;
   justify-content:center;
}

jsFiddle Example

Here is the tutorial if you want to follow and get some idea about flex

Upvotes: 1

Yudiz Solutions
Yudiz Solutions

Reputation: 4449

Can you please check the below code? Hope it will work for you.

You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).

Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/

Upvotes: 1

Related Questions