Software & Apps Design How to Add a Web Caption That Stays With Its Image by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on January 24, 2021 reviewed by Jessica Kormos Lifewire Tech Review Board Member Jessica Kormos is a writer and editor with 15 years' experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others. our review board Article reviewed on Jun 30, 2020 Jessica Kormos Design Graphic Design Photoshop Animation & Video 3D Design Tweet Share Email What to Know In the HTML, place a div tag around the image: Add a style attribute: Set the div width to the image width, add a text-align property, add space between the image and caption, then add the text caption. This article explains how to add a caption to your web image and make sure the caption stays with your image wherever you move it on the web page. Steps to an HTML Image Caption Image captions are important because they add extra information to your visual web page elements. Lifewire / Derek Abella Add an image to your webpage. In the HTML for your webpage, place a div tag around the image: Add a style attribute to the div tag: Set the width of the div to the same width as the image, with the width style property: For captions that are slightly smaller than the surrounding text, add a font-size property to the div style: Captions look best if they are centered below the image, so add a text-align property to the style attribute: Finally, add a little extra space between the image and the caption, by adding a style attribute to the image with a padding-bottom style property: Then add the text caption directly below the image: This is my caption Upload the webpage to your server and test it in a browser. Captioning Tips CSS dimensions can be in many different measurements, so you usually must include the measurement type. For example: However, HTML image dimensions are always in pixels, so you leave the measurement off. If you make the width of the div wider than the image width, the caption may appear beside the image. If this is what you want, then add atag directly before the caption and after the image tag. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit