How to Align Graphics in a Div Tag
Aligning graphics on Web pages requires the use of CSS or Cascading Style Sheets to write style rules for those graphics. Style rules consist of selectors -- bits of code that target specific portions of your Web page -- and property-value pairs that set sizes, colors and more. You can limit your style rules to reference only graphics within a particular div by adding the ID selector for that div in front of any selector used to reference the images themselves. Use class names for your images so you can write one or two style rules in CSS and re-use them on multiple graphics.
Other People Are Reading
Instructions
-
-
1
Open your Web page in Notepad or a code editor. Add your "<div>" tags with an ID name so you can reference it in CSS later:
<div id="pictures">
</div>
-
2
Add your text between the opening and closing "<div>" tags. Wherever you want to add a graphic, use this code:
<img src="path/to/image.png" alt="My Picture" />
Change "path/to/image.png" to match the path to the image on your Web server. Use the "alt" attribute to give your graphic alternative text the browser can show when the graphic fails to load.
-
-
3
Give each "<img>" tag a class name:
<img src="path/to/image.png" alt="My Picture" class="left" />
Use class names such as "left" or "right." You can use the same class name multiple times within the same Web page.
-
4
Locate the "<style>" tags between the "<head>" tags in the code of your Web page. Add "<style>" tags if you do not find them:
<style type="text/css">
</style>
-
5
Write style rules for each class you gave the graphics in your div:
#pictures .left {
float: left;
margin-right: 10px;
}
#pictures .right {
float: right;
margin-left: 10px;
}
The above examples show how you can create "left" and "right" style rules to dictate the alignment of images in you div. Change "pictures" to the ID name of your div. Use the format ".classname" when referencing classes.
-
1
Tips & Warnings
Although you cannot wrap text around a centered image using this method, you can add a centered style using "margin: 0 auto;" instead of floats. Text will appear above and below the image.
