写真を整列させるにはどうすればよいですか？

Question

これは見た目です：

私はテキストを上に移動するにはどうすればよいですか？だから、イメージのほかにその中心？

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：添加垂直整列：画像クラスに中間

Answer 1

最も簡単な方法は、親要素にdisplay: flexとalign-items: centerを設定することです。

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

あなたはconcept.justそれがfine.I'mは以下のスニペットを追加働くあなたの.header-1に

display:flex; 
align-items:center; 
justify-content:center; 

を追加CSS3のフレキシボックスを使用することができます。固定

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>