html - 如何在没有 block 级父项的情况下将文本居中放置在 anchor 内？

Question

我有一组 anchor 标记，看起来像几个盒子，中间有文本。我想要的是将其中的所有文本在宽度和高度上完美居中。我可以用 display: inline-flex; 完成高度部分align-items: center;，但我无法将文本设置为水平居中。这是这些 anchor 的 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>