title: How can you vertically align multi-line text within a list?
body: <p>Example: <a href="http://jsfiddle.net/h5sE6">jsfiddle.net/h5sE6/</a></p>
  
  <p>css:</p>
  
  <pre><code>ul {
      float: left;
      margin-right:20px;
  }
  ul li {
      height: 3em;
      border: 1px solid #ff0000;
      width:200px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt; Some text&lt;/li&gt;
      &lt;li&gt;Some text&lt;br /&gt;some more text&lt;/li&gt;
      &lt;li&gt;some test text3&lt;/li&gt;
      &lt;li&gt;even more text&lt;br /&gt;and more&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
      &lt;li&gt; Some text&lt;/li&gt;
      &lt;li&gt;Some text&lt;br /&gt;some more text&lt;/li&gt;
      &lt;li&gt;some test text&lt;/li&gt;
      &lt;li&gt;even more text&lt;br /&gt;and more&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is trivial with vertically aligning text and making the height equal to the line-height if you have one line only but any more than that, things look really screwy.</p>