Dreamweaver FAQ header image 2

How can I center images and text all at once?

May 23rd, 2009 · 1 Comment

Hi Janine!

I just finished your Total Training DVD and I have really enjoyed it. I do have two questions.

I’m new to Dreamweaver and CSS, and after going through the training, I returned and worked a design for a web site I’m working on for a client. I’ve gone through it step by step as you described, and everything turned out great except for the alignment of the images. They all want to stay to the left of the page unless I set the left margin to around 100. Is that the only way to center images on the page? I’ve attached an example. I’d appreciate any suggestions you might have.

Also, can you recommend a good resource book for Dreamweaver?

Thanks for your help (both on the DVD and via this email),
Mike

Hi, Mike,

Thanks for the kind words about my video.

Like most things in Web design, there are many ways to handle this, but if you want to center all of the images at once and all of the text as well, as you have them in the design you included, you can simply add an alignment setting to the style for the div that contains the content. To vary the alignment, use different divs for different sections of the page and adjust the alignment as desired in the corresponding style.

Here’s how to align the contents of a div: I assume you already have a style associated with the div if you’ve been following my most recent trainings. So, for example, you might have an ID style called #mainContent that already surrounds the content you want to center.

You want to edit that style by double-clicking on it in the CSS Styles panel to open the CSS Rule definition dialog.

In the CSS Rule dialog, click on the Block category on the left, and then choose Center from the drop-down menu next to Text-align.

Click Apply to view the results in the design window. Click OK to close the dialog and save the change.

As for a book, you’ll find my Dreamweaver books along with many free tutorials in the Dreamweaver section on my site at www.DigitalFamily.com.

Hope that helps,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Tags: CSS · Dreamweaver CS3 · Dreamweaver CS4

1 response so far ↓

You must log in to post a comment.