如何获取文本以对齐图片？

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>