在没有块级父母的情况下，我如何将文本集中在锚内

Question

我有一组锚标签，使其看起来像几个框，中间有文本。我想要的是将其内部的所有文本设置在宽度和高度上。我可以使用display: inline-flex; align-items: center;完成高度部分，但无法将文本设置为水平的中心。这是这些锚的HTML，它是样式：

<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Reconhecimento</a>

我想要的只是对它们的 text-align: center效果。有帮助吗？

<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Reconhecimento</a>
<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Neurociência</a>
<a class="tt-button" style="background: #808080; width: 100%; height: 100px; margin-bottom: 10px; display: inline-flex; align-items: center;" href="#">Envolvimento Emocional</a>

Answer 1

尝试justify-content: center;，像这样：

.tt-button {
  background: #808080; 
  width: 100%; 
  height: 100px; 
  margin-bottom: 10px; 
  display: inline-flex; 
  align-items: center;
  justify-content: center;
}

<a class="tt-button" href="#">Reconhecimento</a>
<a class="tt-button" href="#">Neurociência</a>
<a class="tt-button" href="#">Envolvimento Emocional</a>

Answer 2

我亲爱的朋友，您需要将此代码添加到您的样式中。

justify-content: center;

这是最后一个

<a class="tt-button" style="background: #808080;width: 100%;height: 100px;margin-bottom: 10px;display: inline-flex;align-items: center;justify-content: center;" href="#">Reconhecimento</a>