CSS how to align elements


Tags: css,asp.net-mvc

Problem :

I have a shopping cart icon and Cart link, that I want to align with the other links on my menu (Register and Log in), but I am not very good with CSS. Does anybody know how to do this?

See my picture...

enter image description here

Code:

  <ul class="nav navbar-nav navbar-right">
    <li><span><i class="fa fa-shopping-cart">   </i>&nbsp;@{Html.RenderAction("CartSummary", "ShoppingCart");}      </span></li>
    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id =       "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id =       "loginLink" })</li>      

  </ul>


Solution :

Try to give your li items a line-height equals to the height of your navbar.

ul.nav > li {
   line-height: <your nav height>

I made an example for you here : See CodePen


    CSS Howto..

    CSS Transition - how to make a text coming from the top side?

    How to create CSS-based (big) quotation marks?

    How to exclude an HTML element form Ionic CSS

    how to: dynamic navigation bar size depending on dynamic image size?

    CSS: How to center text vertically and horizontally over an image

    How do I get my link background to go beneath it during hover?

    How To Outline a PNG (Transparent) image with CSS?

    How to properly make my own list-style?

    how to create a multi column list with css?

    How to put a image below another?

    How to equal height of