Dreamweaver is a powerful tool for both experienced and inexperienced web designers. One common design issue that Dreamweaver does not address with its embedded tools is the ability to centre a DIV container on a page. Using a series of inline styling elements, you can control a DIV container's width and position on a page. The following is a step by step process to adding the appropriate CSS to a DIV container in order to centre a website using Dreamweaver.
- Skill level:
Other People Are Reading
Locate the DIV container that contains all of the contents of your web page. Create a new DIV container if one does not already exist.
Add a style=" " tag to the DIV container to hold your new styling elements:
<div style=" ">
Add a set width to the DIV container inside of the style tag. Assign a value sufficient enough to hold the entire contents of the web page. Set your value in either percentages or in pixels:
<div style="width: 25px;">
Set your DIV container's right and left margins to "auto":
<div style="width: 25px; margin-right: auto; margin-left: auto;">
Create a closing </div> tag at the end of the web page's contents if you were creating a new DIV container from scratch.
Tips and warnings
- The auto margin styling only works with DIV containers that have a set width.
- If you are using a separate cascading stylesheet, you can add these styling elements there rather than placing them inline on your web page.
- Be sure to check your web page's appearance in several web browsers, including Internet Explorer, Firefox, and Safari.
- Do not use the tag or text-align styling element to try to centre a web page.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for