How do I get my text to align my picture? - html

Question

This is the look:
How do I move the text up? So its centered besides the image?
CSS:
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
padding: 0px 190px;
font-size: 17px;
vertical-align: middle;
line-height: 20px;
}
.logopng{
width: 35px;
height: 35px;
}
HTML:
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>
EDIT: added vertical-align:middle to the image class

Answer 1

The easiest way is to set display: flex and align-items: center on parent element.
header {
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1 {
color: white;
font-size: 17px;
display: flex;
align-items: center;
}
.logopng {
width: 35px;
height: 35px;
margin-right: 20px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">Rocket League Prices
</div>
</header>

Answer 2

you can use css3 flexbox concept.just add
display:flex;
align-items:center;
justify-content:center;
to your .header-1 it works fine.I'm added the snippet below.
header{
padding: 20px;
background-color: #34495e;
color: black;
}
.header-1{
color: white;
font-size: 17px;
display:flex;
align-items:center;
justify-content:center;
}
.logopng{
width: 35px;
height: 35px;
margin-right:10px;
}
<header>
<div class="header-1">
<img src="http://i.imgur.com/cGlBmw7.png" class="logopng">
Rocket League Prices
</div>
</header>