Saturday, April 26, 2008

How to Position Your Photos and Images Using CSS

How to Position Your Photos and Images Using CSSWith these techniques you will be able to position your photos and images anywhere you want on your website or blog with CSS. It doesn’t take much CSS to get your images displaying exactly how and where you want them. Don’t be afraid to experiment with the CSS code! Lets start with the quickest way to position your images using CSS:

Position images to the left or right with inline CSS

This is a great way to quickly position your images to the left or right of your text. The following example will position your images to the left.

Code:<img src=”imageleft.gif” width=”" height=”" alt=”" style=”float: left” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.
To position your images to the right, simply replace your CSS float value from left to the value right:

Code:<img src=”imageright.gif” width=”" height=”" alt=”" style=”float: right” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.
Position images to the left or right with external CSS

If you want to position images regularly to the left or right, you might want to consider adding classes to your external CSS file. This will allow you to add the class tag to every image you want to position without having to re-type your inline CSS. Add the following CSS class tags to your current CSS file:

External CSS:

img.imageleft { float: left }

img.imageright { float: right }

Now add the the class tags to your images:

Code:<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.
You can also add margins to your CSS tags to add extra spacing around your images:

External CSS:

img.imageleft { float: left; margin: 15px; }

img.imageright { float: right; margin: 15px; }

Code:<img src=”imageleft.gif” width=”" height=”" alt=”" class=”imageleft” />

Result:

example image This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.
Position images to the left or right with taglines

Sometimes you might want to add text under your images. This can be easily done with the use of a <div> tag.

External CSS:

.imageleft { float: left; margin: 15px; }

.imageright { float: right; margin: 15px; }

Code:

<div class=”imageleft”>

<img src=”imageleft.gif” width=”" height=”" alt=”" /><br />

Colorful Chester

</div>

Result:

example image
Colorful Chester

This is an example of how to position your images using CSS. You can use these tips on any website or blog. This is just example text so that we can see how the images will position using different techniques.

Position images to the center with external CSS

There is no float tag for centering an image, so you will have to use a <div> tag to position your images to the center:

Blogged with the Flock Browser

No comments: