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对他们的影响。有什么帮助吗？

＆＃13;

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

＆＃13;

Answer 1

尝试justify-content: center;，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: