CSS - Aligning images

Question

I'm styling a site and I have a row of images in figure tags. I've had to make a couple of adjustments and now I can't get them aligned properly. This is how they should look -

And this is how they currently look -

I need all the images aligned as per the first image. Can't quite figure out how to do it as they're wrapped in a tags. Here's the code -

section#products {
  height: 600px;
  max-width: 100%
}

.agencyproducts {
  width: 100%;
  text-align: center;
}

.agencyproducts a {
  display: inline-block;
}

.agencyproducts p {
  text-align: center;
  margin: 30px;
}

.agencyproducts img {
  width: 80px;
  height: 80px;
}

figure {
  text-align: center;
  max-width: 100px;
  height: 100px;
  vertical-align: top;
  margin: 10px;
  font-size: 9px;
}

figure img {}

#products figcaption {
  padding-top: 10px;
  display: inline-block;
}

<section id="products">
  <div class="container">
    <div class="row">
      <div class="twelve columns agencyproducts">
        <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
        <a href="http://localhost:8888/agency/2k4k-production/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
            <figcaption>2K / 4K PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/post-production/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
            <figcaption>POST PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/2d3d-animation/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
            <figcaption>2D / 3D ANIMATION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/adhoc/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
            <figcaption>ADHOC</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/interactive/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
            <figcaption>INTERACTIVE & PERSONALISED</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/tv-adverts/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
            <figcaption>TV ADVERTS</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/360-video/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
            <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
          </figure>
        </a>
      </div>
    </div>

Answer 1

section#products {
  height: 600px;
  max-width: 100%
}

.agencyproducts {
  width: 100%;
  text-align: center;
  vertical-align: top;
}

.agencyproducts a {
  display: inline-block;
  vertical-align: top;
}

.agencyproducts p {
  text-align: center;
  margin: 30px;
}

.agencyproducts img {
  width: 80px;
  height: 80px;
}

figure {
  text-align: center;
  max-width: 100px;
  height: 120px;
  vertical-align: top;
  margin: 10px;
  font-size: 9px;
}

figure img {}

#products figcaption {
  padding-top: 10px;
  display: inline-block;
}

<section id="products">
  <div class="container">
    <div class="row">
      <div class="twelve columns agencyproducts">
        <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
        <a href="http://localhost:8888/agency/2k4k-production/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
            <figcaption>2K / 4K PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/post-production/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
            <figcaption>POST PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/2d3d-animation/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
            <figcaption>2D / 3D ANIMATION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/adhoc/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
            <figcaption>ADHOC</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/interactive/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
            <figcaption>INTERACTIVE & PERSONALISED</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/tv-adverts/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
            <figcaption>TV ADVERTS</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/360-video/">
          <figure>
            <img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
            <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
          </figure>
        </a>
      </div>
    </div>

I have increased the height of the faigures, from 100 to 120 to be able to fit the second line of text. Then I added vertical-align:top so they would align.

Answer 2

I made a flexbox of .agencyproducts with alignment in the center.

section#products {
  height: 600px;
  max-width: 100%
}

.agencyproducts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.agencyproducts a {
  display: inline-block;
}

.agencyproducts p {
  text-align: center;
  margin: 30px;
  width: 100%;
}

.agencyproducts img {
  width: 80px;
  height: 80px;
}

figure {
  text-align: center;
  max-width: 100px;
  height: 100px;
  vertical-align: top;
  margin: 10px;
  font-size: 9px;
}

figure img {}

#products figcaption {
  padding-top: 10px;
  display: inline-block;
}

<section id="products">
  <div class="container">
    <div class="row">
      <div class="twelve columns agencyproducts">
        <p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
        <a href="http://localhost:8888/agency/2k4k-production/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="Production">
            <figcaption>2K / 4K PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/post-production/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="Post-Production">
            <figcaption>POST PRODUCTION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/2d3d-animation/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="Animation">
            <figcaption>2D / 3D ANIMATION</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/adhoc/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="ADHOC">
            <figcaption>ADHOC</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/interactive/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="Interactive">
            <figcaption>INTERACTIVE & PERSONALISED</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/tv-adverts/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="TV ADVERTS">
            <figcaption>TV ADVERTS</figcaption>
          </figure>
        </a>
        <a href="http://localhost:8888/agency/360-video/">
          <figure>
            <img src="http://placehold.it/100/ff0000" alt="360 Video and VR">
            <figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
          </figure>
        </a>
      </div>
    </div>
  </div>
</section>