如何使用html和css将图形中的文本居中

看一看屏幕截图。正如您所看到的，包含

href

的链接稍微向左移动。我想把它们放在

h2

的中央，这样看起来会更好。我添加了

style=“text align:center；”“

，但没有什么不同。我可以做些什么来使元素居中

代码如下：

<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>

梅因先生{
显示器：flex；
证明内容：中心；
柔性包装：包装；
}
九年级




十年级




11年级






十二年级






累计的

您可以在图上设置

文本对齐：居中

，如下所示：

图{
文本对齐：居中；
}

啊，欢迎来到俱乐部。