如何让我的文字与我的照片对齐？

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 add

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

到你的.header-1它运行正常。我添加了下面的代码段。

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>