CSS: центрирующий текст в обернутых гибкими кнопками

Question

У меня есть несколько кнопок на странице, и я подаю иск в flex и flex-wrap, чтобы дать им возможность распространения. Я не могу однако получить текст внутри элементов к центру в своих 100x100 точек коробки (размер является атрибутом

Я пробовал некоторые решения здесь, но ни один из них не похоже на работу для моей ситуации:. CSS Center text (Horizontal and Vertical) inside a DIV block

решение Line-высота не работает, так как часть текста занимает более одной строки.

абсолютное решение позиционирования также не работает, поскольку это ставит кнопки все на верхней один из другого.

в столовый подход нежелателен, так как он не позволяет обернуть кнопки. Также я собираюсь h аве более 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; 
}