Html 如何使文本与图像在同一条线上居中？

我试着把这个logo和文本放在同一条线上，但是把logo放在网站的左角，文本居中。下面是它现在的样子，以及到目前为止CSS和HTML是什么

以下是我当前的代码：

#标题{
字体系列：无衬线；
文本对齐：居中；
颜色：#E03DA7；
垂直对齐：顶部；
显示：内联；
对齐内容：右对齐；
}
身体{
对齐内容：居中对齐；
垂直对齐：顶部；
保证金：0；
宽度：100%；
身高：100%；
}
#导航栏{
字体系列：monospace；
字体大小：25px；
文本对齐：居中
}
#缅帕拉{
文本对齐：左对齐；
最大宽度：300px；
最大高度：750px；
字体大小：20px；
垂直对齐：中间对齐；
字体系列：无衬线
}
img{
最大宽度：100px
}

欢迎来到魔兽世界。
关于我们|实时雷达|为什么要加入？
欢迎来到WOW Virtual，这是一家全新的虚拟航空公司，面向飞行模拟器社区。我们只为我们的飞行员提供最好的服务，并努力为我们的任何飞行员保持最好的服务。有兴趣吗？今天就加入
 

将文本和图片放在一个div中，文本居中对齐。然后，如果希望div本身居中，则可以将其居中。

通常使用table tag，您可以将垂直对齐属性作为中间应用于表格单元格

如果要对div使用相同的属性/行为，请对父级（.header）使用

display:table row

，然后围绕徽标和文本向子div显示：table cell

这将允许您使用

垂直对齐：中间
。
检查通过复制初始代码段进行的编辑。如果您有任何疑问，请告诉我


.header{
显示：表格行；
}
.header>div{
显示：表格单元格；
垂直对齐：中间对齐；
}
#头衔{
字体系列：无衬线；
文本对齐：居中；
颜色：#E03DA7；
垂直对齐：顶部；
显示：内联；
对齐内容：右对齐；
}
身体{
对齐内容：居中对齐；
垂直对齐：顶部；
保证金：0；
宽度：100%；
身高：100%；
}
#导航栏{
字体系列：monospace；
字体大小：25px；
文本对齐：居中
}
#缅帕拉{
文本对齐：左对齐；
最大宽度：300px；
最大高度：750px；
字体大小：20px；
垂直对齐：中间对齐；
字体系列：无衬线
}
img{
最大宽度：100px
}

欢迎来到魔兽世界。
关于我们|实时雷达|为什么要加入？
欢迎来到WOW Virtual，这是一家全新的虚拟航空公司，面向飞行模拟器社区。我们只为我们的飞行员提供最好的服务，并努力为我们的任何飞行员保持最好的服务。有兴趣吗？今天就加入
您可以使用

如果将
img
和
h1
包含在容器中（比如
header
），请将以下CSS添加到
header
标记中

header { 
  display: flex; 
  align-items: center; /* align vertical */ 
 }

结果可以在这里找到，使用修改后的代码：
更像是一种黑客的方式，您可以将
img
和
h1
放入带有class
的div中。header

然后将
div
的
行高设置为图像的高度：

.header {
  line-height:100px;
}

您可以看到输出。
就这么简单：


#标题，img{
垂直对齐：中间对齐；
}
#头衔{
显示：内联；
}

欢迎来到魔兽世界。
关于我们| Live Radar |为什么加入？
@Grant Meder:如果您决定使用flex box，请检查您的应用程序在目标浏览器中是否得到良好支持@大卫切利亚，你说得对，这不是OP问题的要求。不过，OP可以参考。上面的示例在IE11中运行良好，IE11是唯一一款部分支持Flex的现代浏览器。我不知道为什么要使用表格单元格。您可以查看我的代码片段并分享您的想法。您的方法非常简单&我喜欢它。但是如果在下一行中有一个内联元素，它不会被拉到欢迎文本之后的第一行吗