OneMoreQuestion OneMoreQuestion - 4 years ago 70
HTML Question

How to vertically align <p> tag in navbar

For my nav bar, I want to have my p tag line up with my a tags

CSS is here

#welcome {
vertical-align: center;
/* align: middle; */
color: white;

HTML is here

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="welcome">
<li><a id="home" href="/index.html">Home</a></li>
<li><a id="logout" href="/logout.html">Log out</a></li>

But this is what it looks like:

enter image description here

So how do I accomplish this?

Answer Source

the easiest way would be to give the p tag the same line-height as the height of the navbar and remove its margins:

.navbar p {

the vertical-align property does no align elements vertically despite what it looks like. It only works in table cells and on inline-block elements. Also there is no vertical-align: center; its vertical-align: middle;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download