-2

I am trying to vertical align images in a grid. I am using the <figure> HTML element with caption for the images. The images replace checkboxes.

My code:

/* @media (min-width: 600px) { */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
  padding: 1%;
}


/* } */

figure.item {
  border: 1px solid #000;
  /* To horizontally center images and caption */
  text-align: center;
  margin: 0;
  padding: 0;
}


/* hack to make images flexible: width: 100%;*/

img {
  width: 100%;
}

.caption {
  /* visibility: hidden; */
}

img,
figcaption {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

:checked+label img,
:checked+label figcaption {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}
<div class="grid">
  <figure class="item">
    <input type="checkbox" id="1" class="box" />
    <label for="1">
      <img src="https://picsum.photos/seed/100/100" />
      <figcaption>Text below the image1</figcaption>
    </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="2" class="box" />
    <label for="2">
      <img src="https://picsum.photos/seed/100/100" />
      <figcaption>Text below the image1</figcaption>
    </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="3" class="box" />
    <label for="3">
      <img src="https://picsum.photos/seed/100/100" />
      <figcaption>Text below the image1</figcaption>
    </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="4" class="box" />
    <label for="4">
      <img src="https://picsum.photos/seed/100/100" />
      <figcaption>Text below the image1</figcaption>
    </label>
  </figure>
</div>

As you can see the 4 images are in a row (which is correct) but on top of the page. I want it verticaly centered (also when another row is added, both rows should be aligned in the middle). I have tried things like:

display: flex;
align-items: center;

But nothing seems to work. What am I missing?

Mohammad Mostafa Dastjerdi
  • 674
  • 1
  • 6
  • 21
Maurice
  • 1,147
  • 2
  • 21
  • 49
  • 1
    Does this answer your question: https://stackoverflow.com/q/19461521/82548? If not, why not, where does it fail? What (else) did you expect, or require? – David Thomas Aug 22 '23 at 12:08
  • @Maurice links to jsfiddle must be accompanied by the code in the question. Please edit your question and use the snippet button to copy your code into the question otherwise it is off topic for SO – Pete Aug 22 '23 at 12:34

1 Answers1

1

The problem is with the height of the div and before that we should take care of its parent which is body and a level higher, html:

so:

html, body {
  height: 100%;
}

.grid {
  height: 100%;
  align-items: center;
}

here is the working example: https://jsfiddle.net/s9pyLe07/1/

also the code snippet:

html,
body {
  height: 100%;
}


/* @media (min-width: 600px) { */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
  padding: 1%;
  height: 100%;
  align-items: center;
}


/* } */

figure.item {
  border: 1px solid #000;
  /* To horizontally center images and caption */
  text-align: center;
  margin: 0;
  padding: 0;
}


/* hack to make images flexible: width: 100%;*/

img {
  width: 100%;
}

.caption {
  /* visibility: hidden; */
}

img,
figcaption {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

:checked+label img,
:checked+label figcaption {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}
<div class="grid">
  <figure class="item">
    <input type="checkbox" id="1" class="box" />
    <label for="1">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="2" class="box" />
    <label for="2">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="3" class="box" />
    <label for="3">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
  </figure>
  <figure class="item">
    <input type="checkbox" id="4" class="box" />
    <label for="4">
            <img src="https://picsum.photos/seed/100/100" />
            <figcaption>Text below the image1</figcaption>
        </label>
  </figure>
</div>
Mohammad Mostafa Dastjerdi
  • 674
  • 1
  • 6
  • 21