如何左对齐和垂直对齐页眉中的图像，并使文本水平位于div的中心

Question

我正在寻求左对齐和垂直对齐此页眉中图像的帮助。

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* {
box-sizing: border-box;
}
img {
float: left;
vertical-align: middle;
}
.header {
padding: 5px;
text-align: center;
background: #222222;
color: white;
font-size: 20px;
}
h2 {
color: white;
}
title {
color: white;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #2C2C2C;
}

<div class="header" class="frame">
<img src="https://i.imgur.com/pZIRNtP.png" class="logo" alt="logo" />
<h2>This should be center</h2>
</div>

这是我的图像代码(目前它是左对齐的，但我似乎无法垂直对齐。然后当文本应该水平地位于div的中心时，它也会将我的文本向右移动(

img {
float:left;
vertical-align: middle;
}

我基本上需要红色图像保持相同的大小，我只需要它左对齐(可能从左起50像素(，并与标题div垂直对齐。但我也需要文本保持在div、vert和horz的中心。

Answer 1

单向：

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
.header {
padding: 5px;
background: #222222;
color: white;
font-size: 20px;
}
h2 {
color: white;
text-align: center;
margin-top: -45px;
}
title {
color: white;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #2C2C2C;
}

<div class="header" class="frame">
<img src="https://i.imgur.com/pZIRNtP.png" class="logo" alt="logo" />
<h2>This should be center</h2>
</div>