如何讓我的文字對齊我的照片？

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> 

編輯：附加的垂直對齊：中間至父元素上的圖像類

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

可以使用CSS3 Flexbox的 concept.just

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

添加到您的.header-1它的工作原理fine.I'm添加下面的代碼片段。

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>