如何在CSS按钮中垂直和水平对齐文本

Question

我正在尝试在按钮内水平和垂直对齐文本。我检查了大量的解决方案，没有任何乐趣。这就是我现在拥有的：

<div class="buttonx">
<a href="texttext.html">Text</a>
<a href="texttext.html">text text<br>text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
</div>
<style>
.buttonx {
display: flex;
flex-wrap: wrap;
}
.buttonx a {
display: table;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
align-items: center;
color: white;
}
</style>

文本显示为水平对齐，但不是垂直对齐。请帮忙。

Answer 1

这样只更改buttonx类：

.buttonx {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

.buttonx {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.buttonx a {
display: flex;
align-items: center;
justify-content: center;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
color: white;
height:40px;
}

<div class="buttonx">
<a href="texttext.html">Text</a>
<a href="texttext.html">text text<br>text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
</div>

注意我还从buttonx类中删除了一些css属性。

Answer 2

.buttonx {
display: flex;
flex-wrap: wrap;
}
.buttonx a {
display: flex;
align-items: center;
justify-content: center;
background-color: #a00c1a;
width: 120px;
line-height: 20px;
margin: 10px;
text-decoration: none;
color: rgb(0, 0, 0);
text-align: center;
color: white;
}

<div class="buttonx">
<a href="texttext.html">Text</a>
<a href="texttext.html">text text<br>text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
<a href="texttext.html">text</a>
</div>