CSS：在flex-wrapped按钮中居中文本

Question

我在页面上有几个按钮，我正在使用flex和flex-wrap来赋予它们传播能力。但是，我无法将元素中的文本放在100x100像素的盒子中（大小是该属性的一个属性。

我在这里尝试了一些解决方案，但它们似乎都不适用于我的情况：CSS Center text (Horizontal and Vertical) inside a DIV block

Line-height解决方案不起作用，因为某些文本需要多行。

绝对定位解决方案也不起作用，因为它将按钮全部放在另一个上面。

表格方法是不合需要的，因为它不允许按钮换行。此外，我将有超过30个按钮。

HTML：

<section id="directory">

                <a href="jaguarchagra.html">Jaguar Chagra</a>

                <a href="texttext.html">A marriage breaks up</a>

                <a href="texttext.html">Amasanga warmi</a>

                <a href="texttext.html">Anaconda caught</a>

                <a href="texttext.html">Big Water Killing</a>

            </section>

CSS：

#directory {
    display: flex;
    flex-wrap: wrap;
}

#directory a {
    background-color: #BFBDAF;
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    text-decoration: none;
    color: black;
    text-align: center;
    vertical-align: middle; /* does nothing */

以下是目前为止的图片：

Answer 1

您需要将align-items: center;添加到#directory a并使其成为display: flex的块级元素。

#directory a {
    display: flex;
    background-color: rgb(191, 189, 175);
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 20px;
    text-decoration: none;
    color: rgb(0, 0, 0);
    text-align: center;
    align-items: center;
}