title: List Items Middle Vertically Aligned
body: <p>I have the following HTML and CSS that creates a list, where the list items have a min-height set.  I would like for the contents of the list items to be vertically aligned in the middle instead of the top if there is not enough content to fill the entire height.  How the heck do I pull this off?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              ul {
                  width : 300px;
                  list-style-type: none;
              }
  
              li {
                  min-height : 45px;
                  vertical-align : middle;
                  border-bottom : 1px black solid;
              }
          &lt;/style&gt;
      &lt;head&gt;
      &lt;body&gt;
          &lt;ul&gt;    
              &lt;li&gt;Testing testing 1234&lt;/li&gt;
              &lt;li&gt;Testing testing 1234 Testing testing 1234&lt;/li&gt;
              &lt;li&gt;Testing testing 1234 Testing testing 1234 Testing testing 1234&lt;/li&gt;
              &lt;li&gt;Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234&lt;/li&gt;
              &lt;li&gt;Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234&lt;/li&gt;
         &lt;/ul&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Which gives me the following:</p>
  
  <p><img src="https://i.stack.imgur.com/bUnne.png" alt="enter image description here"></p>