CSS align images and text on same line

You can simply center the image and text in the parent tag by setting

div {
     text-align: center;
}

vertical center the img and span

img {
     vertical-align:middle;
}
span {
     vertical-align:middle;
}

You can just add second set below, and one thing to mention is that h4 has block display attribute, so you might want to set

h4 {
    display: inline-block
}

to set the h4 "inline".

The full example is shown here.

<div id="photo" style="text-align: center">
  <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
  <span style="vertical-align:middle">Take a photo</span>
</div>

This question is from 2012, some things have changed from that date, and since it still receives a lot of traffic from google, I feel like completing it by adding flexbox as a solution.

By now, flexbox is the advised pattern to be used, even if it lacks IE9 support.

The only thing you have to care about is adding display: flex in the parent element. As default and without the need of setting other properties, all the children of that element will be aligned in the same row.

If you want to read more about flexbox, you can do it here.

.container {
  display: flex;
}

img {
  margin: 6px;
}

<div class="container">
  <img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

You can either use (on the h4 elements, as they are block by default)

display: inline-block;

Or you can float the elements to the left/rght

float: left;

Just don't forget to clear the floats after

clear: left;

More visual example for the float left/right option as shared below by @VSB:

<h4> 
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>