Vertical align elements of different heights with top/bottom margin - html

Question

I have been trying to vertical align links in a list, where all but one of the links has background color/border (to look like a button).
Even though the code on this fiddle works, it doesn't respect the reduced height of that link (the Sign In link).
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
a.button {
height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#" style="height: 60px;">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>
JSFiddle link: http://jsfiddle.net/6er3aguk/
What I would like to achieve is basically to have some sort of top/bottom margin on that Sign In link, so it doesn't stick to the top and bottom of the surrounding div.
Any ideas on how I can achieve that?

Answer 1

This is how I would create the effect that you're looking for.
This will vertically center the links, clear the parent properly. And irregardless of the browsers font-setting, at it's minimum width it will stop contracting with 15px of spacing between each element and the sides of the container if the window is smaller than the nav, instead of overlapping or moving to new lines.
This also completely avoids the use of floats and display: table hacks.
JSFiddle
*, *:before, *:after {
box-sizing: border-box;
}
html body, ul, div, li, a {
padding: 0;
margin: 0;
}
.left, .right {
position: absolute;
top: 0; bottom: 0;
white-space: nowrap;
}
.left {
position: absolute;
left: 15px;
}
.right {
text-align: right;
position: absolute;
left: 172.5px;
right: 0;
}
.inner {
position: relative;
height: 75px;
background-color: grey;
}
ul {
height: 100%;
font-size: 0;
}
ul:before {
content: " ";
height: 100%;
}
ul:before,
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
font-size: 12pt;
display: block;
vertical-align: middle;
color: white;
text-decoration: none;
font-weight: normal;
padding: 10px 7.5px;
}
.right li:last-child {
padding-left: 7.5px;
padding-right: 15px;
}
.right a {
border-radius: 3px;
}
.right a:hover {
background: #888;
}
.icon-user:before {
content:"\e745";
}
a.button {
background: #f38060;
color: white;
padding: 10px 15px;
}
a.button:hover {
background: #f98666;
}
a.logo {
background-image: url(//placehold.it/150x20);
background-size: 150px 20px;
height: 20px;
width: 150px;
padding: 0px;
}
<div class="inner">
<ul class="left">
<li><a class="logo" href="/"></a></li>
</ul>
<div class="right">
<a class="mobile-menu" href="#">
<span class="icon-menu"></span>
</a>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>
<a class="button" href="#">Sign In
<span class="icon-user"></span>
</a>
</li>
</ul>
</div>
</div>

Answer 2

You can achieve the preferred style by putting the Sign In text and the span inside a div and applying the same styles you did for a.button to that div.
html body,
ul,
div,
li,
a {
padding: 0;
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.inner {
height: 75px;
background-color: grey;
}
a {
color: white;
text-decoration: none;
font-weight: normal;
}
.logo {
display: block;
background-image: url(http://static1.tme.eu/pics/icons/no-image-placeholder-big.png);
background-size: 150px 20px;
background-position: left center;
background-repeat: no-repeat;
height: 100%;
width: 150px;
}
.right-nav {
height: 100%;
display: inline-block;
float: right;
}
ul {
height: 100%;
margin: 0;
}
ul li {
height: 100%;
float: left;
display: table;
margin: 0;
padding: 0;
line-height: 46px;
margin-left: 20px;
}
ul li a {
display: table-cell;
vertical-align: middle;
line-height: 46px;
}
.icon-user:before {
content: "\e745";
}
#signin {
max-height: 60px;
background-color: #f38060;
border-radius: 3px;
border: 1px solid #f38060;
box-sizing: border-box;
color: white;
display: table-cell;
font-size: 14px;
font-weight: normal;
line-height: 20px;
padding-bottom: 12px;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
text-align: left;
vertical-align: middle;
}
<div class="inner">
<ul class="left">
<li>
<a class="logo" href="/"></a>
</li>
</ul>
<div class="right-nav">
<a class="mobile-menu right" href="#"><span class="icon-menu"></span>
</a>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>
<a class="button" href="#" style="
height: 60px;
">
<div id="signin">Sign In<span class="icon-user"></span>
</div>
</a>
</li>
</ul>
</div>
</div>