Thank you for being a valued part of the CNET community. As of December 1, 2020, the forums are in read-only format. In early 2021, CNET Forums will no longer be available. We are grateful for the participation and advice you have provided to one another over the years.

Thanks,

CNET Support

General discussion

dreamwever8, how to align image center with css

Sep 6, 2007 11:44PM PDT

When I try to setup class rule for aligning image center, all I see in "box" category are right and left. I hate to go back to html to align center.
Help?

Discussion is locked

- Collapse -
CSS aligning image
Sep 7, 2007 2:39AM PDT

The image should be in a division, the css part should declare it as display block, and the margin with auto. For example:

#tobealignedimage img {
display: block;
margin: 1em auto 0;
}
...
<div id="tobealignedimage" >
<img src="tobealignedimage.jpg" alt="Aligned image" />
</div>

Swisse

- Collapse -
How do I use DW8 to produce this code?
Sep 7, 2007 4:53AM PDT

Thank you!!
How do I use DW8 to produce this code?

- Collapse -
Using Dreamweaver 8
Sep 8, 2007 5:21AM PDT

I hope you have some basic knowledge of CSS and know how to go about in Dreamweaver. Upon opening Dreamweaver choose new HTML file. It will produce the code for you. Click the Window menu and under Workspace Layout choose Designer. In the left window choose Split so that you can see the visual layout and the code at the same time. Look for the entry <title>Untitled Document</title> and below it paste this code:
<style type="text/css">
#tobealignedimage img {
display: block;
margin: 1em auto 0;
}
</style>
and look for the entry <body> and below it paste this code:
<div id="tobealignedimage" >
<img src="tobealignedimage.jpg" alt="Aligned image" />
</div>
so roughly your code will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#tobealignedimage img {
display: block;
margin: 1em auto 0;
}
</style>
</head>

<body>
This is will show a center-aligned picture.
<div id="tobealignedimage" >
<img src="tobealignedimage.jpg" alt="Aligned image" />
</div>
</body>
</html>

Swisse