My header has three sections: left, center, and right. The left section is currently empty. In the center section, I have placed my page title, while in the right section, there is an "Account" link with an icon next to it. However, the icon appears to be slightly pushed towards the top, leaving a gap below it beside the word. I want both the word and the icon to align on the same line and at the same height. How can I correct this? To illustrate the issue better, I have added a red background.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>