How to Align Images in CSS & HTML
Graphics Layout Help for Newbies
Want to align an image on a web page? Need side-by-side graphics and text? This page should solve your basic graphics and HTML questions.
I wrote this tutorial many years ago, when all webpages had to be written from scratch using HTML code to assign paragraphs, images, fonts, and everything else.
Nowadays, sites like Hubpages, Blogger and Wordpress give us an easy text editor and do all the coding for us. But every now and then, we still need to crack out the HTML and write the code for ourselves.
Tip: Print out my HTML Graphics Cheat Sheet with most of the codes and tricks on this page!
How to Say "Place an Image Right Here!" on a Webpage
HTML puts hidden codes in webpages that mark which parts are text, images, or links. These codes are tucked in between brackets <> which your web browser knows are meant for its eyes only.
Before we can align an image, we need an image! Upload your picture to a free image host like Photobucket or your own website, if you have one. Then find the image's URL (on Photobucket, it's the "Direct Link"; on Picasa, click "Embed Image", then "Image Only - no link".)
Once you have an image's URL, use the following HTML code to say, "place the image here":
Replace the part in quotes with the URL of your image.
But That's Not Enough, Because...
That HTML code places a graphic, but there's no alignment commands. Without them, the graphic is going to stick up above your text as if it's a really, really enormous letter.
For example, look at how the text is behaving here:
Here's the code that created that mess:
My cat likes to help my friend Lynne when she is basting a quilt. My cat is an expert quilt-holder. She sprawls like this: <img src="http://www.example.com/cat-picture.jpg"> and holds down the fabric. The downside, of course, is cat fur on the quilt. Lynne says that's breaking it in.
Do you see how the web browser is treating the image like a great big huge letter that sticks up above the rest of the text, shoving down the sentence surrounding it? That's almost never useful.
Aligning Images Left or Right
To fix this problem, you could put the image in its own paragraph with nothing to its left or right (except maybe another image):
The other option is to tell the web browser to push the graphic all the way to the left or right, and make the text fill in NEXT to it, as the cat graphic to the right is doing here.
This is the code you need to align an image to the right:
<img src="http://www.example.com/graphic.jpg" style="float: right; margin-left: 5px; margin-bottom: 5px;">
(The unbolded parts are optiona.)
What's all that gobbledygook mean? Let's break it down.
- <img ... > is the placeholder for an image.
- src="..." tells the web browser where the image's data is stored or uploaded (its location, its URL).
- style="..." style tells the web browser to expect a special set of codes called CSS (never mind what that is) which explain how you want the image to be displayed: its size, its layout, whether it has a border, and so on. Styles can also be added to set text colors, sizes and fonts. If HTML is the main chassis of the car, styles tells the web browser about the car's paint job and whether it comes equipped with bluetooth or cup holders.
- float: right; means push the image as far to the right as it will go. If there's already something there (the sidebar, another floated image), then this image will squeeze in just to the left of that. This is how you tile images side by side. You can also float: left; to make images behave just like the letters of this paragraph: they'll start at the left-hand margin, then tile from left to right across the column until they run out of room, then they flow onto the next line.
- margin-left and margin-bottom are optional. They add a little bit of an empty border (px means "pixels") to the left and under the image so things aren't mashed right up against it. If you have floated an image to the left, you should probably include a margin-right to add padding there.
VERY IMPORTANT: TO TURN OFF "FLOAT", use the following command:
<p style="clear: both;">
Why would you want to do that? Well, if an image is floated all the way to the right or left, whatever you write after that will attempt to fill in around it. For example, the text above above filled in around that cat picture.
If you don't want the following paragraph to fill in next to the floated object, then you need to use the clear command to draw an invisible horizontal line across the page that says "everything after this has to start on a new paragraph, below the floated image(s)."
HTML Code For Turning a Graphic Into a Link
You know how to make a link like this one, right?
in other words, <a href="link goes here">clickable text</a>
makes a link in HTML code.
That's a text link. The web browser will let you put an image in place of the clickable text!
<a href="destination-URL"><img src="imageURL"></a>
or like this, if the image has some kind of style set to fine-tune it:
<a href="destination-URL"><img src="imageURL" style="align: left; margin-right: 10px; margin-bottom: 10px;"></a>
How to Center an Image or Headline
The easiest way to center a graphic (or any text) is to put this around it:
<p align=center><img src="imageURL"></p>
which makes a paragraph -- including a blank line after it -- containing the image.
This is the old-fashioned way, and it still works.
Code gurus say we're supposed to do it this way:
<img src="imageURL" style="margin: 0 auto;">
Why? Because about ten years ago, the code gurus realized that HTML (the stuff in brackets) should be for THINGS, like image or paragraph, while CSS (the style="blah" stuff), should be HOW TO DISPLAY THE THING.
The problem is, Internet Explorer is a dinosaur, and it didn't learn how to do auto-margins until IE9. I think most people have upgraded to 9 now, so you should probably use the "correct" code now.
HTML Code to Center a Caption Under an Image
Sorry, code gurus. I'm stuck in 1999, and this still works.
<p align=center><img src="imageURL"><br>Caption Goes Here</p>
<br> is a line break.
The caption can include a link:
<p align=center><img src="imageURL"><br><a href="LinkURL">Clickable Text</a></p>
How to Add Captions Under Aligned Images
Earlier, I showed you how to center a caption under a centered image using HTML. But here's the layout trick I use most often: a caption under a graphic that's left- or right-aligned!
The trick is that web browsers think of paragraphs as box-shaped areas. By default, they're the width of a whole column, but you can make them narrower. Then you can lay them side-by-side.
A box (paragraph) can contain anything: images, text, you name it! Including captions.
So what if I want to make an image all the way to the right, with a caption? Here's the HTML code to make that happen:
<p style="float: right; width: 200px; margin-left: 5px; margin-bottom: 5px; text-align: center: font-size: 8pt;"><img src="imageURL" style="width: 100%;">Caption goes here</p>
Write a bunch of text here. It'll fill in to the left of the floated-paragraph.
Let Me Explain How That Works
Let's take it slow.
- <p style="...">Stuff</p> This is the paragraph's container. The "Stuff", in this case, is the image plus its caption.
- width: 200px; The paragraph's width in pixels. Make the paragraph width the same width as the image in pixels. Alternatively, you could specify the paragraph width by em -- the width of the letter m -- or in %, the width of the column. (In that case it's best to use the same units with the margins; see below).
- float: right; pushes the paragraph all the way to the right.
- the optional margin commands put a little whitespace to the left and below the paragraph's bounding box, so whatever's next to it will give it a little room.
- text-align: center; ensures that the caption is centered under the image.
- font-size: is optional, but I like to make it 9pt, a bit smaller than body text tends to be.
Notice that I made the image's style=command specify that its width is 100%. 100% of what? The paragraph containing it. Because the image is going to shrink or stretch to match the width of the paragraph containing it, there won't be any room for the caption beside the image, so that forces the caption below the image.
If necessary, in the image's style-code, you may also want to give the image itself a margin-bottom: 5px; or something of the sort to push the caption down a wee bit and not have it so snug against the image's bottom.
Are you trying to put a photo credit under an image, and you need the caption to include a clickable link? Then, in the "caption goes here" area, do the following: <a href="LinkURL">Clickable text goes here</a>
All of the above works just the same if you want the image and its caption on the left. Just change to float: left; and change margin-left to margin-right
How to Scale / Resize an Image - Style Its Width or Height
Your web browser can scale images to different sizes.
The old way is to specify an image's dimensions in pixels:
<img src="imageURL" style="width: 250px; height: 400px;">
That's great. But nowadays, people may be viewing a webpage on an itsy bitsy smartphone or a ginormous computer monitor, and they have completely different numbers of pixels!
That means we have to be clever. Instead of using pixels as our units, we should use a unit that will shrink or grow in scale with the whole page.
That means PERCENT (of the column) or EM (width of the letter em).
<img src="imageURL" style="width: 25%;">
<img src="imageURL" style="width: 10em; height: 3em;">
Percent works best for side-by-side layouts.
But because the actual webpage scrolls off the top and bottom of your screen, the vertical dimension is a little tricky to specify in percentages. That's when I start using ems instead. An m is an m, even if it's turned 90 degrees.
Fancy Stuff: CSS Background-Images
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.
Here's the code:
<p style="background-image: url(imageLocation); padding: 1em; color: white;">
padding and color are optional. Color is font color. Padding puts some space between the edge of the text and the borders of the paragraph (em means the width of the letter "m"; you could also specify the padding in px, pixels.)
Unfortunately, background images often make it hard to read text. Sometimes even changing the color of the text (see code below) doesn't help.
Sometimes you only want the backgroun image to tile in one direction. Inside the style="..." command, you can add the following:
- background-repeat: repeat-x; (tile horizontally)
- background-repeat: repeat-y; (tile vertically)
- background-repeat: no-repeat; (if you don't want the image to tile).
Amazon Spotlight: Learn CSS the Easy Way - I got this book for my Mom
Please share and/or rate this page if you found it useful!
© 2008 Ellen Brundige