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

我正在寻找帮助左对齐和垂直对齐此标题中的图像

@导入url（“https://fonts.googleapis.com/css?family=Open+Sans:400300600700“；
* {
框大小：边框框；
}
img{
浮动：左；
垂直对齐：中间对齐；
}
.标题{
填充物：5px；
文本对齐：居中；
背景：#22222；
颜色：白色；
字体大小：20px；
}
氢{
颜色：白色；
}
头衔{
颜色：白色；
}
身体{
字体系列：“开放式Sans”，无衬线；
背景色：#2C2C；
}

这应该是中心

单向：

@导入url（“https://fonts.googleapis.com/css?family=Open+Sans:400300600700“；
* {
框大小：边框框；
}
img{
垂直对齐：中间对齐；
}
.标题{
填充物：5px；
背景：#22222；
颜色：白色；
字体大小：20px；
}
氢{
颜色：白色；
文本对齐：居中；
边缘顶部：-45px；
}
头衔{
颜色：白色；
}
身体{
字体系列：“开放式Sans”，无衬线；
背景色：#2C2C；
}

这应该是中心

请更新您的问题，使其以文本形式显示您的相关代码。让我们知道什么不起作用。那就是说你想要红色图像上的文字？红色图像应该垂直居中对齐吗？文本应垂直和水平居中对齐？还要注意，您在div上重复了

class

。