How do you vertically align a button in a nav that is using line-height?

Question

How can I vertically align a button in a nav that is using line-height while keeping my specified padding dimensions?

I'd like to align this button with the rest of the nav elements:

I'm using line-height to align the others, but using line-height on the button creates unwanted results:

Summary: I'm vertically aligning my nav list items with line-height but this makes my button extend the full height of the nav bar. I need to use line height to vertically align this ul with another ul that contains the site icon. The line-height height used is the icon's height.

Please see the issue recreated here fiddle .

html:

<ul>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#">Text</a>

    </li>
    <li><a href="#" class="button">Text</a>

    </li>
</ul>

css:

* {
    box-sizing: border-box;
}
ul {
    list-style: none;
    border: 1px solid;
    float: right;
    width: auto;
    height: auto !important;
    display: inline-block;
    margin: 0;
}
ul li {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    float: left;
    margin: 0;
    padding: 0;
    direction: ltr;
}
ul li a {
    line-height: 103px;
    background: rgba(0, 0, 0, 0);
    text-transform: uppercase;
    padding: 0 15px;
    display: block;
    width: 100%;
}
.button {
    padding: 0.5em;
    background: grey;
}

Answer 1

The easy fix is to apply the class to the column (IE: <li class="button"> ) instead of the link: <a href="#" class="button"> (See edit here )

If you can't do this, you will have to play around with, height, and width styles, or create a div to make your link fit

Edit: By changing the style to padding:0 0.5em; you will not get the vertical displacement

Answer 2

You can vertically-align by doing

CSS:

div {
    height: 300px;
}
a {
    line-height: 300px;
}

Put the a in the div and you should be all set.

Answer 3

Add display:inline-block; vertical-align:middle display:inline-block; vertical-align:middle instead of float:left in li tag