如何在没有块级父级的情况下将文本居中在锚内？

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>