How do I align text to be underneath the center of an image?

Question

I am new to website development and I was just trying out features to make a website when I noticed no matter what I did with my CSS code, the figcaption for my images would not align to the center underneath the image.

Here is an image of this: The caption is to the left of the image

.features {
  background: rgb(255, 255, 255);
  color: grey;
  display: flex;
  flex-direction: row;
  margin: 0px;
  flex-wrap: wrap;
}

.features figure {
  margin: auto;
  width: 100px;
  text-transform: uppercase;
  text-align: center;
  padding-right: 100px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 20%;
  box-shadow: gray 0px 0px 10px;
}

<section class='features'>
  <figure>
    <a href="link-to-somewhere">
      <img src="images/car1.jpg" alt="Fast sports cars">
    </a>
    <figcaption>Fast sports cars</figcaption>
  </figure>
</section>

Answer 1

You should use the flexbox to center the image and text vertically, you don't need padding-right and text-align:

   .features figure{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      width: 100px;
      text-transform: uppercase;
    }