html - CSS:在 flex-wrapped 按钮中居中文本

Question

我在一个页面上有几个按钮，我正在使用 flex 和 flex-wrap 来赋予它们传播能力。但是，我无法让元素中的文本在其 100x100 像素的框中居中(大小是 .

我在这里尝试了一些解决方案，但似乎没有一个适合我的情况:CSS Center text (Horizontal and Vertical) inside a DIV block

行高解决方案不起作用，因为某些文本超过一行。

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

表格方法是不可取的，因为它不允许按钮换行。我还将拥有 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 使其成为 block 级元素.

#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;
}