title: How to vertically align text inside fixed-height list items using CSS?
body: <p>How can I vertically align the text in the following list items:</p>
  
  <p><a href="http://jsfiddle.net/K2eF3/">http://jsfiddle.net/K2eF3/</a></p>
  
  <pre><code>&lt;style&gt;
  
  ul { list-style-type: none; width: 300px; }
  ul li { border: 1px solid red; height: 100px; }
  
  &lt;/style&gt;
  
  &lt;ul&gt;
      &lt;li&gt;A bear&lt;/li&gt;
      &lt;li&gt;A panda who eats bamboo&lt;/li&gt;
      &lt;li&gt;A giraffe with a very very very very very veryvery very very very long neck&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I can't use line-height because those sentences are dynamically generated and could be one line or multiline (not always singe). That's also why I can just individually target each <code>&lt;li&gt;</code> with custom padding.</p>
  
  <p>Vertical align middle didn't work either, after reading up on it, it appears to only target elements which explains why aligning text inside an element using it didn't work.</p>