-1

I'm trying to have 3 figures side by side, each containing an image (that has a link in it), and a caption that's centered on the top of the image.

So far, I've got this:

figure {
  display: table;
  width: 50%;
  margin:0;
}

figcaption {
  display: table-caption;
  caption-side: top;
}

#content {
  max-width: 80%;
  height: 80%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  text-align: center;
}
<div id="content" class="center">

    <div>
      <figure style="float:left;">
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure>
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat 2 </figcaption>
      </figure>
    </div>

  </div>

But when I try to add a third (or fourth, for that matter) image, the whole thing malfunctions. I've tried using style="float:right; on the third image, which leads to it being below the other 2 figures on another line(of course, after reducing the width of figure first).

Essentially what I want the end result to be is to be able to put any number of images (3 and 4 for my use, but generalizing the solution will help people with the same problem) side by side, while each image has some text over it (hence the figure and figcaption CSS rules, which display the figcaption above the picture)

3
  • You might want to look into using Flexbox.
    – Swimmer F
    Sep 29, 2021 at 10:58
  • Also why are some styles on a seperate style sheet and some on the elements themselves? I would recommend separating these, or it will be difficult to maintain the code down the road.
    – Swimmer F
    Sep 29, 2021 at 10:59
  • So, you are suggesting I make each figure a flex box and move that around? Makes sense, will test that. Also, Ik it's ugly to have styles both on the elements as well as a separate sheet, but I do that in a draft, to be quick, and fix it down the road.
    – Costas Mav
    Sep 29, 2021 at 11:02

3 Answers 3

0

.flex{display: flex;}
figure {
  display: table;
  width: 50%;
  margin:0;
}

figcaption {
  display: table-caption;
  caption-side: top;
}

#content {
  max-width: 80%;
  height: 80%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  text-align: center;
}
<div id="content" class="center">

    <div class="flex">
      <figure >
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure >
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure >
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure >
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure>
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat 2 </figcaption>
      </figure>
    </div>

  </div>

2
  • That's exactly what I was looking for! Are you aware of any way to enlarge the image so that it "fills" the figure, at least width-wise? I can do width=150% and enlarge the image, but I am almost certain there's another way to do it, without making width more than 100%.
    – Costas Mav
    Sep 29, 2021 at 11:13
  • transform: scale(2); Sep 29, 2021 at 12:11
0

For 3-4 image you can provide width to the element. But you can show a defined number of images using width. To show n number of image you can show as table and use css property overflaw:scroll.

figure {
  display: table;
  width: 50%;
  margin:0;
}

figcaption {
  display: table-caption;
  caption-side: top;
}

#content {
  max-width: 80%;
  height: 80%;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  text-align: center;
}
<div id="content" class="center">

    <div>
      <figure style="float:left; width:25%">
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure style="float:left; width:25%">
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat 2 </figcaption>
      </figure>
      <figure style="float:left; width:25%">
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat </figcaption>
      </figure>
      <figure style="float:left; width:25%">
        <a href="#">
          <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
        </a>
        <figcaption style="text-align:center">Cute cat 2 </figcaption>
      </figure>
    </div>

  </div>

1
  • Ow, that completely slipped my mind when making this, thanks. Can the images be resized somehow, so that each one "fills" its figure, at least width-wise? width=150% is a solution, but I feel there's another one, where you don't have to exceed 100%.
    – Costas Mav
    Sep 29, 2021 at 11:15
0

firstly remove float and use display: flex;, it is very useful and highly recommended one.

and change the code to like this

#container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    width: 20%;
    display: block;
    align-items: center;
    justify-content: center;
    border: 1px solid;
}
.link {
    text-decoration: none;
    color: #000;
}
.image-container {
    display: inline-block;
    width: 100%;
}
.caption {
    text-align: center;
}
    <div id="container">
      <div class="item">
            <a href="#" class="link">
                <h3 class="caption">Cute cat </h3>
              <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
            </a>
        </div>
        <div class="item">
            <a href="#" class="link">
                <h3 class="caption">Cute cat </h3>
              <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
            </a>
        </div>
        <div class="item">
            <a href="#" class="link">
                <h3 class="caption">Cute cat </h3>
              <img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" class="image-container">
            </a>
        </div>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.