How to vertically align
tag in navbar

Question

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">
      <p>Welcome</p>
    </li>
    <li><a id="home" href="/index.html">Home</a></li>
    <li><a id="logout" href="/logout.html">Log out</a></li>
  </ul>
</div>

But this is what it looks like:

So how do I accomplish this?

and note that I do not want to use another a tag for Welcome because I do not want to deal with the highlighting when you hover over it — OneMoreQuestion, Jul 28 '16 at 17:28
Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — Gandalf the White, Jul 28 '16 at 17:28
Man there are many solutions available in many thread for this. In your case why don't you give some padding instead because the div is real small and it wont cause any problem if you do that. — Gandalf the White, Jul 28 '16 at 17:29
@GandalftheWhite I don't want to use padding because I would rather they all have the same padding so that I don't run in to browser size issues down the road — OneMoreQuestion, Jul 28 '16 at 17:37
I have used padding on logo image in the navigation bar and I haven't really faced any real problems in accordance to responsiveness because you can handle them separately anyway. — Gandalf the White, Jul 28 '16 at 17:39
@NateWhittaker I ended up adding a padding and got it work, thanks! — OneMoreQuestion, Jul 28 '16 at 17:49

score 0 · Accepted Answer · answered Jul 28 '16 at 17:32

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 {
    line-height:40px;
    margin:0;
}

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;

score 0 · Answer 2 · answered Jul 28 '16 at 17:50

You can also do this :

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

DEMO

score 0 · Answer 3 · answered Jul 28 '16 at 17:50

0

The vertical-align property tells an inline-block element how to align to its inline-block siblings.

Therefore your problem can be solved with the following code:

.nav li { 
    display: inline-block; 
    vertical-align: middle;
}

answered Jul 28 '16 at 17:50

mr.tamagotchi

133
6

How to vertically align tag in navbar

3 Answers3

How to vertically align
tag in navbar