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

Question

下面是我的代码：

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

我想让图片显示在我的h1标题旁边。但我得到的是图像始终位于我的标题之上。有什么想法吗？

Answer 1

<h1>是block-level element，浏览器通常会在元素之前和之后显示带有换行符的块级元素。不过，您可以将其设为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>

还有更多......