title: CSS: centering text within flex-wrapped buttons
body: <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>