How to Create a Caption Under an Image in CSS
Web designers use a set of website design rules known as Cascading Style Sheets (CSS) to style their web pages. These rules enhance the site's appearance and provides the designer with a method to control the rendering of the site's content. The designer uses CSS to style professional looking images and captions and create an eye-please effect for the site's visitors.
Other People Are Reading
Instructions
-
-
1
Write a new CSS rule to create a parent or wrapper div. This div will house both your image and your caption. Give the div the necessary alignment properties to place it in the desired location on the web page and include design rules as needed. For instance, the following example of a CSS rule will create a wrapper div with the id of imageParent. The imageParent div will contain an image and a caption. It will float the image to the right side of your web page and will wrap the image and caption in a thin, black, solid border to set it apart from the other content.
#imageParent {float: right; border: thin black solid;}
-
2
Create another CSS rule to define the properties of your image. In this example, this rule will place a margin of three pixels between the picture and the border. The three-pixel margin will be applied on the top, right and left of the image. The rule places a one-pixel margin on the bottom of the image where the caption will be positioned. This will have the visual effect of marrying the caption with the picture inside of the black border.
#imageParent img {margin-top: 3px; margin-bottom: 1px; margin-right: 3px; margin-left; 3px;}
-
-
3
Define the caption's properties with a CSS rule. You may define the properties of the caption by styling a text tag such as a heading or paragraph tag. In this example, a paragraph tag is styled that will be used to contain the caption. The rules states that the caption will display in italics while aligning in the center of the div.
#imageParent p {text-align: center; font-style; italic}
-
4
Write the HTML This example shows the HTML code that is styled with the CSS rules from the previous examples.
<div id="imageParent"> <img src="yourImage.gif" /> <p>Your caption</p> </div>
-
1
References
- Photo Credit Comstock/Comstock/Getty Images
