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

Question

以下是我的代码：

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

我希望将图片放在h1标题旁边，但实际上图片总是出现在标题的顶部。有什么好的想法吗？

- Coolguy

---

你需要发布你的CSS。 - m0meni

这是一个很好的概述，解释了CSS中的display属性。https://css-tricks.com/almanac/properties/d/display/ - jessegavin

Answer 1

<h1> 是一个 块级元素，浏览器通常会在元素之前和之后换行显示块级元素。但是你可以将其设置为 inline 或 inline-block。

h1 {
    display: inline;
}

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

- Stickers

Answer 2

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

其中一些方法非常恶心，应该避免使用，但我认为列出它们是为了说明问题。

使用<img>上的align属性。

<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>

使用内联样式来将 <h1> 元素进行 float。

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

使用内联样式来浮动<img>标签。

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

使用内联样式使<img>和<h1>都显示为内联元素。

<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属性和一些padding。

下面的例子假定您有一个16x16像素的图标图片。

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

还有许多其他的...

- jessegavin

---

谢谢，这解决了我的一个问题：调整和对齐i Font Awesome元素和h1：将i放在h1内部是解决方案。 :) - Pragmateek