How to Align Images in CSS & HTML

HTML puts hidden codes in webpages that mark which parts are text, images, or links. On Squidoo, you can use HTML in Text Modules.

Before we can align an image, we need an image! Upload a picture to a free image host like Photobucket or Picasa. Then get the image's URL (on Photobucket, it's the "Direct Link"; on Picasa, click "Embed Image", then "Image Only - no link".)

Use the <img> tag as a placeholder for your image on the page. The URL (location of the image ending in .gif, png. or .jpg) goes inside the tag, like this:

<img src="http://www.somedomain.com/imagename.jpg">

SRC is short for "source." For another example, here's the HTML code for the magician Squid at upper right:

<img src="http://www.istad.org/lenses/squids/magic-squid.jpg" style="width: 150px; float: right;">

Notice the extra style options tucked inside the <img> tag to set its size and position. For the rest of this tutorial, I'll teach you what options are available for aligning and resizing images.

Back to Top ⇑

You know how to make a link like this one, right?
Link to my Greece Odyssey Lens

HTML Code:
<a href=http://www.squidoo.com/odyssey>Link to my Greece Odyssey Lens</a>

Do the same thing to turn an image into a link, but replace the text with an HTML image code:

HTML Code:
<a href=http://www.squidoo.com/odyssey><img src=http://www.istad.org/squid/click-me.jpg></a>

TIP: Make it clear that an image IS a link, by making it look like a button or using a caption.

Back to Top ⇑

The easiest way to center a graphic (or any text) is to put this around it:

<p align=center>(image goes here)</p>

which makes a paragraph -- including a blank line after it -- containing the image. For example:

HTML Code to Center an Image:

<p align=center><img src="http://www.istad.org/squidoo/align-images/computer-squid.jpg"></p>

To center a caption under an image, write <br> (break) to go to the next line, them write the caption BEFORE the end-of-paragraph code (</p>).

I Squidoo: Do You?

HTML Code for a Caption Under a Centered Image:

<p align=center><img src="http://www.istad.org/squidoo/align-images/computer-squid.jpg"><br>I Squidoo! Do You?</p>

The caption can include a link:

<p align=center><img src="http://www.istad.org/squidoo/align-images/computer-squid.jpg"><br>I <a href="http://www.squidoo.com">Squidoo</a>! Do You?</p>

Back to Top ⇑

To place images and/or text side by side, we need to use CSS styles, which give us more control over layout and appearance. The style command lets us piggyback a bunch of fancy effects onto basic HTML.

float pushes an image right or left, and then text (or another image) fills in beside it. So the code for this lightbulb squid graphic is:

<img src=http://www.istad.org/squids/idea-squid.jpg style="float: left">

You don't need to know what HTML and CSS are to use them, but if this alphabet soup is starting to feel intimidating, check out "What Are HTML and CSS?"

Note: I simplified the code in the above example. In fact, I had to do something else to this image -- add empty space to the right and below the image -- or it would be jammed against the text next to it. The next section explains how.

Back to Top ⇑

We could simply add the CSS command margin: 10px; to the style, and this would put a ten-pixel-wide buffer of white space around the graphic, so this text isn't bang-up against it.

But if I'd done that, there'd be a margin on all sides of the graphic, pushing it away from the left-hand gutter.

Luckily, CSS lets us set each margin independently, if we choose:

Here's the CSS code for the example above:
<img src="http://www.istad.org/greece/templeHephaistosSm.jpg" style="float: left; margin-right: 30px; margin-bottom: 20px;">

Immediately after the code, write the paragraph you want next to the image.

To put the side-by-side image to the right of the text, change float: left; to float: right; and margin-right: to margin-left:

Back to Top ⇑

Here's a close-up photo of the chair I'm sitting on. (It was handy.)

With CSS style: background-image, any image can be tiled as the background for any webpage element. We usually use this trick with paragraphs, but it also works for lists, headers, etc.

Unfortunately, background images often make it hard to read text. Sometimes even changing the color of the text (see code below) doesn't help. This example demonstrates why you should choose background images with care, instead of just snapping a random photo!

Here's the code:

<p style="background-image: url(http://www.istad.org/squidoo/align-images/wicker-pattern.jpg); padding: 10px; color: white;">

One solution is to have the background repeat in only one direction, using repeat-x (only horizontal), repeat-y (only vertical), or no-repeat (useful when you've got a graphic fitted to the paragraph...but be careful; text may be a different size on different computers.)

Here, I've repeated the background image as a vertical strip, then added padding to the left side of the text. padding separates text from the edge of a paragraph, as opposed to margin, which is the space around the paragraph.

Here's the code for this background-image:

<p style="background-image: url(http://www.istad.org/squidoo/align-images/wicker-pattern.jpg); background-repeat: repeat-y; padding-left: 125px;">

I used 125px for the padding since my image was 100 pixels wide.

The better solution, of course, is to use a graphic that doesn't clash with the text over it. Here I lowered the contrast and raised the brightness of the image using Photoshop. The code is the same as the first example, except I didn't change the text color.

Back to Top ⇑

Your web browser doesn't do quite as good a job as a graphics program, but it can scale images! Specify either the height or the width, and the browser resizes the other dimension to match.

In fact, I've been doing this throughout my tutorial, because my squid graphics are huge. (Graphics look better scaled down than up). I was concealing a part of the code in my examples above. Here's what I was really doing:

<img src=http://www.istad.org/lenses/squids/idea-squid.jpg style="float: right; width: 200px; margin-left: 15px; margin-bottom: 10px">

Note that you can also define width or height using percent. For example, width: 50% means "make the width of the image half the width of the paragraph."

Back to Top ⇑

Earlier, I showed you how to center a caption under a centered image using HTML. Now, I'm going to show you my fanciest layout trick: a caption under a graphic that's left- or right-aligned!

At right is a graphic pushed to the margin using float: right, with some margins separating it from this paragraph.

Here's the code:

<img src=http://www.istad.org/greece/templeHephaistosSm.jpg style="float: right; margin-left: 20px; margin-bottom: 10px;">

Temple of Hephaistos
© 2005 Ellen Brundige

Now for the tricky part. Instead of just having an image floating on the right, I want a whole paragraph over there, side by side with this one. That "floating" paragraph contain TWO things: (1) the image and (2) the caption below it. The trick is to set the "floating" paragraph width to the same width as the image. That forces the text (i.e. the caption) inside the "floaty" paragraph to wrap when it exceeds the image width.

Here's the CSS code for aligned image + caption:

<p style="float: right; width: 200px; margin-left: 20px; margin-bottom: 10px; font-size: 9pt; font-style: italic; text-align: center;"><br><img src="http://www.istad.org/greece/templeHephaistosSm.jpg" style="margin-bottom: 5px;"/>Temple of Hephaistos
© 2005 Ellen Brundige</p>

If you're having trouble figuring out what all the codes mean, just copy and paste the whole kit and kaboodle, then change three things to use it:

1. Change the URL of my image to the URL of your image.
   
2. Change the width (in pixels) to the width of your image.
   
3. Change the caption. You can break it into multiple lines, as I did, or just use one line.

font-size, font-style and text-align are tweaks to make the caption look good. These are optional. For many more font special effects, see my CSS Tutorial lens (Here's shortcuts to sections on text colors and font, size, bold or italics).

And what if you want the caption to be a clickable link, too?
 

Back to Top ⇑

Kapoho, Hawai'i
Photo Credit: HVO

This technique is VERY handy for Creative Commons images, which ask you for a link and credit in exchange for using them for free!

Use the "centered captions under images" trick above, then in the caption include an HTML link, like this:

<p style="float: left; width: 200px; font-size: 9pt; text-align: center; margin-right: 20px; padding-bottom: 0px;"><img src="http://www.istad.org/lenses/volcanoes/cinder-cone.jpg" alt="Cinder Cone, Kapoho Eruption, Hawaii" height="132" width="200">Kapoho, Hawai'i
Photo Credit:<a href="http://hvo.wr.usgs.gov/kilauea/history/1960Jan13/">HVO</a></p>

Again, note that I had to make the paragraph width the width of the graphic in pixels, so that the caption underneath is no wider than the image (it wraps around when it hits the right-hand edge of the graphic.)

 

Back to Top ⇑