title: How can I use CSS to vertically center the text in an anchor, within a LI?
body: <p>Variations on this question have been asked many times. Vertical centering with CSS is a challenge. </p>
  
  <p>I have a particular scenario, dealing with a list displayed horizontally. The markup is like this: </p>
  
  <pre><code>  &lt;ul id='ul1' class='c'&gt;
      &lt;li&gt;&lt;a href='javascript:void(0)'&gt;Fribble Fromme&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='javascript:void(0)'&gt;Fobble&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='javascript:void(0)'&gt;Foo Fickle Pickle&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>The style is like this: </p>
  
  <pre><code>  ul.c {
      height:52px;
      text-align:center;
    }
    ul li a {
      float:left;
      text-decoration:none;
      border: 1px solid Maroon;
      padding:2px 12px;
      background:#FFEF8A;
      line-height:1em;
      width:100px;
    }
    ul li a:hover {
      background: #CCC;
    }
    ul li {
      height:52px;
      display:inline-block;
    }
  </code></pre>
  
  <p>The resulting list looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/9hu9O.png" alt="enter image description here"></p>
  
  <p>But I want all the boxes to be the same height, and I want the text to be vertically centered in each box.  I can set the box-height by adding a <code>height</code> style for the A elements.  The result looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/NXqKI.png" alt="enter image description here"></p>
  
  <p>...which is close to what I want, but the vertical-centering isn't happening. </p>
  
  <p>I can set <code>line-height</code> for the text, <a href="http://www.ampsoft.net/webdesign-l/vertical-aligned-nav-list.html" rel="noreferrer">as suggested in this post</a>, to do the vertical centering. I can even pick different values of <code>line-height</code> for different A elements, if I know which of the elements will get multiple lines of text.  But I don't know which ones will require multiple lines. </p>
  
  <p>How can I get it to center when some of the A elements have text that wraps? </p>