title: CSS Horizontal List - Vertically Align Multi Line Links
body: <p>I have a basic list based horizontal navigation bar and everything works fine. 
  But I've got to the point where I have so many navigation items that I need the link text to flow onto multiple lines.</p>
  
  <p>Please see codepen and css below to see what I currently have. </p>
  
  <p>The problem is that some links are just single words, so only need to be on one line.
  Those links are out of vertical align to the links on multiple lines. (See link)</p>
  
  <p>Please can someone help me resolve this issue, so that all links are vertically aligned in the middle.</p>
  
  <p>Thanks</p>
  
  <p>-</p>
  
  <p><a href="http://codepen.io/anon/pen/poKru" rel="nofollow">http://codepen.io/anon/pen/poKru</a></p>
  
  <p>-</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;ul class="group"&gt;
    &lt;li&gt;&lt;a href="#"&gt;This is&lt;br /&gt;a Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Another&lt;br /&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;This link&lt;br /&gt;is quite long&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;What can&lt;br /&gt;I do...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;...when&lt;br /&gt;this happens?&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul {
    background: #001e78;
    border-radius: 5px;
    padding: 10px;
    margin: 0;
    width: 980px;
  }
  
  li {
    display: inline;
  }
  
  li:last-child a {
    border: none;
  }
  
  a {
    float: left;
    padding: 10px 12px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  
  a:hover {
    background: rgba(255,255,255,0.1);
  }
  
  .group:after {
    content: "";
    display: table;
    clear: both;
  }
  </code></pre>