How to align an image side by side with a heading element?

Question

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?

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

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

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

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

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

And many more...