CSS position text vertically relative to image inside hyperlink - html

Question

I'm having two problems with this CSS code, and I'm needing a second set of eyes to help me look at it.
1.I'm trying to move my text up a bit while not moving the image inside of my navbar. Everything should look centered in the navbar, but the text seems to be offset and I'm not sure how to fix it. My only understanding of fixing vertical alignment is through padding, but that would also impact the image.
I'm trying to make the hover-over effect dynamic and resize according to window height, but I seem to be having trouble accomplishing this.
Codepin: https://codepen.io/dansbyt/pen/ZEWvZwJ
CSS in question:
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 22%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 2%;
display: block;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links a:hover {background-color: #3F5328}

Answer 1

How about this:
.navbar {
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328;
}
.navbar_links {
margin-left: 22%;
position: absolute;
width: 78%;
}
.navbar_links a {
line-height: 56px;
display: flex;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;
}
.navbar_links a:hover {
transform: scale(1.05);
}
p {
margin-block-start: 0;
margin-block-end: 0;
}
<div class="navbar">
<div id="computer" class="navbar_links">
<img src="http://mrdansby.com/projects/dash_icon.png"> Dash
</div>
</div>

Answer 2

add span to text and style to it and use rem instead % for navbar_links a padding
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 22%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 1.2rem;
display: block;
float: left;
font-family: 'Archivo', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links span{ position:relative; bottom:5px; }
.navbar_links a:hover {background-color: #3F5328}
<div class="navbar">
<div id="computer" class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/dash_icon.png"> <span>Dash</span>