How to vertically align

tag in navbar


Tags: html,css,twitter-bootstrap

Problem :

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:

enter image description here

So how do I accomplish this?



Solution :

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;


    CSS Howto..

    How to find a div / panel in repeater and apply css?

    How to apply information submitted in Code Mirror? [closed]

    CSS/Menu: How to position element right below/beside elements

    How to add an existing class to td in css file?

    How to pull out CSS attributes from inline styles with BeautifulSoup

    How to change Label color in flex Using CSS?

    How to make parent div above child div without position absolute?

    CSS: how to have child1 the same height as child2?

    How to: Reduce font-size if a line breaks

    How to implement multiple background-images for an id / class with the same CSS code?

    How to add elements to an specified position without influence of other elements?

    How to top align two cell divs within a table div when one cell div contains an absolute positioned div?

    How to center vertical inside header?

    How to get an automatic effect of rosace in css ?

    how to give animation effect on hover using css or jquery on border of division

    jquery width toggle animation is showing vertical cells during animation takes place

    CSS: how to set screen layout according to the different dimension

    How do I translate an image based on its height?

    How to crop SVG file within HTML/CSS

    How to add background video stop button

    How come half the triangle is missing

    How to justify short text inside fill fixed width parent with CSS?

    How do I specify in HTML or CSS that a table column should have the minimum width

    How to set the target images that should go uner this code

    How to use CSS with JS [duplicate]

    How do I align these boxes using bootstrap?

    CSS Rotation and Styling - how to?

    How to make a border which wraps around text

    How do I correct this error?

    How to toggle css visibility with Javascript