In many cases, once an image is inserted into a web page it may require changes to its format. You may want to center the image, wrap text around the image, change the size of the image, vertically line up several images, or apply a border around your images.

In order to follow the tutorials below you will need a HTML text editor of your choice, an image to manipulate, somewhere to upload the code and image, and an Internet browser to view them. Click here to use an online HTML editor¹ with these tutorials.

Align an image

There are two key ways to align or reposition an image on a web page. The easiest way is to center an image using HTML markup². This is a depracated method, which means it may not work in newer browsers and could render differently across various browsers. The second method is to align images with CSS³ using a few lines of simple code. Because Cascading Style Sheets (CSS) is separate from HTML, you will also need to learn the three ways to link CSS style rules to HTML⁴ pages.

Wrap text around an image

There are a couple of ways to achieve this effect in your web pages. If you are a beginner then you may look to position images with the align property⁵. You can also use the table alignment method to position images⁶ though this requires more knowledge of HTML markup and is slightly harder. The third method which has the most compliance across all browsers is to use CSS and the float property to align images⁷.

Change image size

You may also be interested in changing the size of images to better control their display on browsers. A helpful tutorial on image size attributes⁸ can be found here. You may also need to resize an image using a graphics program⁹.

Align several images

For a more sophisticated look like an image gallery, a more complex approach to the layout of images is needed. If you have mastered the previous steps however then this tutorial on how to make a CSS image gallery¹⁰ should be within your ability.

Apply border around an image

To apply simple style effectsto distinguish images on the web page, borders can be helpful. The easiest way to apply a border around an image is to apply the border attribute to an image¹¹. A more complex but reliable method is to apply a border to an image using CSS inline styles¹². Also, when using an image as a link you may also see a blue border around the image. Here is a tutorial to help resolve image links with blue borders¹³.

---

1. use an online HTML editor
2. center an image using HTML markup
3. align images with CSS
4. three ways to link CSS style rules to HTML
5. position images with the align property
6. use the table alignment method to position images
7. use CSS and the float property to align images
8. tutorial on image size attributes
9. resize an image using a graphics program
10. tutorial on how to make a CSS image gallery
11. apply the border attribute to an image
12. apply a border to an image using CSS inline styles
13. resolve image links with blue borders