How can I center text in a figure using html and css

Question

Take a look at this screenshot. As you can see the links holding the href are slightly shifted to the left. I want to center them under the h2 so that it looks nicer. I added style="text-align: center;" but it didn't make a difference. What can I do to center the elements?

This is the code:

<style>
.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
</style>
<div class="main">
    <figure>
        <h2 style="text-align: center;">Grade 9</h2>
        <figcaption><a href='#' style="text-align: center;">Regular 9</a><br></figcaption>
        <figcaption><a href='#' style="text-align: center;">Honors 9</a><br></figcaption>
    </figure>
    <figure>
    <h2 style="text-align: center;">Grade 10</h2>
    <figcaption><a href='#' style="text-align: center;">Regular 10</a><br></figcaption>
    <figcaption><a href='#' style="text-align: center;">Honors 10</a><br></figcaption>
    </figure>
    <figure>
    <h2 style="text-align: center;">Grade 11</h2>
    <figcaption><a href='#' style="text-align: center;">Courses 11</a><br></figcaption>
    <figcaption><a href='#' style="text-align: center;">Diploma 11</a><br></figcaption>
    <figcaption><a href='#' style="text-align: center;">EZ Diploma 11</a><br></figcaption>
    </figure>
    <figure>
    <h2 style="text-align: center;">Grade 12</h2>
    <figcaption><a href='#'>Courses 12</a><br></figcaption>
    <figcaption><a href='#'>Diploma 12</a><br></figcaption>
    <figcaption><a href='#'>EZ Diploma 12</a><br></figcaption>
    </figure>
</div>
<div class="main">
    <figure>
        <h2 style="text-align: center;">Cumulative</h2>
        <figcaption><a href='#' style="text-align: center;">Cumulative GPA</a><br></figcaption>
    </figure>
</div>

Answer 1

You can set the text-align: center on the figure like this:

figure {
  text-align: center;
}