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

Question

下面是我的代码:

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

我想让图像出现在我的h1标题旁边.但我得到的是图像始终位于我的标题之上.有任何想法吗？

Answer 1

<h1>是一个块级元素,浏览器通常在元素之前和之后显示带有换行符的块级元素.但是你可以把它作为inline或inline-block

h1 {
    display: inline;
}

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

Answer 2

有很多方法可以做到这一点。

其中一些方法非常粗暴，应该避免，但我认为为了说明起见将它们列出来会很有趣。

使用 上的align属性<img>。

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

嵌套<img>在<h1>.

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

使用内嵌样式float的<h1>。

<div>
  <img src="images/ConfigIcon.png"/>
  <h1 style="float: right">System Configuration</h1>
</div>

使用内嵌样式float的<img>。

<div>
  <img src="images/ConfigIcon.png" style="float: left"/>
  <h1>System Configuration</h1>
</div>

使用内联样式，以使双方<img>并<h1>显示为inline元素。

<div>
  <img src="images/ConfigIcon.png" style="display: inline" />
  <h1 style="display: inline">System Configuration</h1>
</div>

使用内联样式，以使双方<img>并<h1>显示为inline-block元素。

<div>
  <img src="images/ConfigIcon.png" style="display: inline-block" />
  <h1 style="display: inline-block">System Configuration</h1>
</div>

使用 css background-image 属性和一些填充。

以下示例假设您有一个 16x16 像素的图标图像。

<div>
  <h1 style="background: url(images/ConfigIcon.png) 0 50% no-repeat;padding-left: 16px">System Configuration</h1>
</div>

还有很多...