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

below is my code:

下面是我的代码:

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

I want to make the image appear beside my h1 header. But what I get is that the image is always at top of my header. Any ideas?

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

2 个解决方案

#1

<h1> is a block-level element, and browsers typically display the block-level element with a newline both before and after the element. However you can make it as inline or inline-block

是一个块级元素,浏览器通常在元素之前和之后显示带有换行符的块级元素。但是,您可以将其设置为内联或内联块

h1 {
    display: inline;
}

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

#2

There are soooo many ways to do this.

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

Some of these methods are really gross and should be avoided, but I thought it would be interesting to list them out for the sake of illustration.

其中一些方法确实很严重,应该避免使用,但我认为为了说明而列出它们会很有趣。

Use the align property on the <img>.

使用上的align属性。

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

Nest the <img> inside the <h1>.

将嵌套在

中。

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

Use an inline style to float the <h1>.

使用内联样式浮动

。

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

Use an inline style to float the <img>.

使用内联样式浮动。

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

Use inline styles to make both <img> and <h1> display as inline elements.

使用内联样式使和

显示为内联元素。

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

Use inline styles to make both <img> and <h1> display as inline-block elements.

使用内联样式使和

显示为内联块元素。

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

Use css background-image property and some padding.

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

The following example assumes you have a 16x16 px icon image.

以下示例假定您具有16x16像素图标图像。

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

And many more...

还有很多...