title: Bootstrap nav-bar: how to vertical align wrapped-/multiple line text
body: <p>I'm trying to vertical align text on a bootstrap navbar item. The text is wrapped on two lines. Its no problem to align a single line text but it gets much more difficult to vertical-align when its on two lines. I cant use line-height are there any alternatives? I havent seen any good solutions on wrapped text, many solutions doesn't take into account multiple lines of text.</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="http://localhost/cll/?page_id=39"&gt;SHORT SINGLE LINE&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="http://localhost/cll/?page_id=39"&gt;VERY LONG TEXT, WRAPPED TEXT&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS code</p>
  
  <pre><code>.navbar-nav &gt; li &gt; a
      {
  
      height: 58px;
      line-height: 19px;
      padding-top: 10px;
      text-align: center;
  }
  </code></pre>