CSS: centering text within flex-wrapped buttons
<p>I have a several  buttons on a page and I am suing flex and flex-wrap to give them spreading ability. I cannot however get the text within the  elements to center in their 100x100 px boxes (the size is an attribute of the .</p>

<p>I tried some solutions here, but none of them seem to work for my situation: <a href="https://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block">CSS Center text (Horizontal and Vertical) inside a DIV block</a></p>

<p>The Line-height solution does not work, as some of the text takes more than one line.</p>

<p>The absolute positioning solution also does not work as it places the buttons all on top one of another.</p>

<p>The table approach is undesirable as it does not allow the buttons to wrap. Also I am going to have over 30 of these buttons.</p>

<p>HTML:</p>

<pre><code>&lt;section id="directory"&gt;

                &lt;a href="jaguarchagra.html"&gt;Jaguar Chagra&lt;/a&gt;

                &lt;a href="texttext.html"&gt;A marriage breaks up&lt;/a&gt;

                &lt;a href="texttext.html"&gt;Amasanga warmi&lt;/a&gt;

                &lt;a href="texttext.html"&gt;Anaconda caught&lt;/a&gt;

                &lt;a href="texttext.html"&gt;Big Water Killing&lt;/a&gt;

            &lt;/section&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#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 */
</code></pre>

<p>Here is an image of what it looks like so far:
<a href="https://i.stack.imgur.com/bh0rF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bh0rF.jpg" alt="buttons"></a></p>