Vertically centering nav items in Bootstrap 3
<p>So, I've set my <code>navbar</code> to a custom height of <code>80px</code>, but now that makes my nav items not centered vertically. I've been searching for an answer to center them vertically in relation to their parent item for awhile now so I figured I'd give StackOverflow a shot.</p>

<p>Screenshot: <a href="http://screencast.com/t/zfUuX9SSQK" rel="nofollow">http://screencast.com/t/zfUuX9SSQK</a></p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;div class="container-fluid isModified"&gt;
    &lt;div class="row"&gt;
        &lt;nav class="navbar isModified" role="navigation"&gt;
            &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                &lt;div class="navbar-header"&gt;
                    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"&gt;
                        &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
                        &lt;span class="icon-bar isModified"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar isModified"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar isModified"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                    &lt;a href="index.php" class="navbar-brand"&gt;Tickets&lt;/a&gt;
                &lt;/div&gt;

                &lt;div class="collapse navbar-collapse" id="nav-collapse"&gt;
                    &lt;ul class="nav navbar-nav isModified"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt; &lt;!-- end col-lg-12 --&gt;
        &lt;/nav&gt;
    &lt;/div&gt; &lt;!-- end row --&gt;
&lt;/div&gt; &lt;!-- end container --&gt;    
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>.navbar.isModified {
height: 80px;
border-radius: 0;
background-color: #cccccc;

}

.icon-bar.isModified {
background-color: #fff;

}
</code></pre>