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

Question

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

的属性

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

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

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

table 方法不可取，因为它不允许按钮换行。此外，我将拥有超过 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;
}

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

CSS: centering text within flex-wrapped buttons

html

css

flexbox

text-alignment