html - 如何使用 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>
解决方案
您可以text-align: center
像这样在图上设置:
figure {
text-align: center;
}