How to Align the Caption With the Photo in HTML

HTML DIV tags allow you to align images and captions in your Web pages. The DIV tags use the CSS alignment properties to align DIV contents on the left, center or right side of the page. When you do not incorporate DIVs, some captions do not align properly under an image. Using an HTML DIV tag and CSS, you can align images perfectly in every page.

Instructions

1. Right-click the HTML file that contains your image and captions and click "Open With." Click the HTML editor you want to use for the alignment.

2. Add DIV tags around the image and the caption. DIV tags are containers, so you can wrap each of your HTML elements using one. The following code is an example of two DIV tags that contain an image and a caption:

   <div><img src="myimage.png"></div>

   <div>Caption sentence</div>

3. Set the DIV tags to the same alignment. For instance, if you want to align the image to the left and the caption to the left, add the following code to the DIV tags' definition:

   style="margin-left: left; width: 100%; position: absolute"

References

• W3 Schools: CSS Horizontal Align