How to Center Picture Captions
Website owners often include photo captions below their images. You may have seen product pages and photo galleries containing perfectly aligned image captions. When you create a Web page, you use HTML, the markup language that makes Web pages possible. HTML does not center text automatically. When you need to center a picture's caption, use Cascading Style Sheets. CSS allows you to tailor any Web page element's appearance. Use CSS to align your picture captions perfectly.
Other People Are Reading
Instructions
-
-
1
Launch Notepad or your HTML editor, and open one of your pages that contains a photo.
-
2
Add the following text to your document's "body" section:
<div class="centerCaption">
<br />
<img src="xyz.jpg" />
My picture caption
</div>
Replace "xyz.jpg" with the name of a photo on your hard drive. Be sure to include the full path name. For example, to use a picture named "snow.jpg" located in "C:/photos," make the HTML code look like this:
<div class="centerCaption">
<br />
<img src="C:\photos\snow.jpg" />
My picture caption
</div>
Note the "div" block that encloses the picture and caption. This opening "div" tag references a CSS class named "centerCaption." Once you create that class, it determines how everything in the "div" block looks.
-
-
3
Locate the document's "</head>" tag. You will find this near the top of the document. Place the following CSS code block before that tag:
<style>
.centerCaption {text-align:center;}
</style>
This class tells browsers to center text in any HTML element that references the class.
-
4
Save the document, and view it in your browser as you normally do. The browser will center the caption below the picture.
-
1
Tips & Warnings
Note that the CSS class name in this example is "centerCaption." Change that name to anything you like. If you do, remember to change that name every place in your HTML document.
