html - 如何将图像与标题元素并排对齐？

Question

下面是我的代码:

<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>

我想让图像出现在我的 h1 标题旁边。但我得到的是图像始终位于标题的顶部。有什么想法吗？

Answer 1

<h1>是 block-level element , 并且浏览器通常会在元素前后显示一个换行符的 block 级元素。但是你可以把它写成inline或 inline-block

h1 {
    display: inline;
}

<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>