How to center text in Dreamweaver CC 2015
Use HTML and CSS to center content in Dreamweaver
I occasionally get questions from users about how to center text in Dreamweaver, so I thought I’d share some tips here. At a (very) high level, you use HTML to add text to your page. Then, you use CSS to style that text.
Dreamweaver provides visual tools to make these tasks easier, but it is good to have a fundamental understanding of HTML and CSS to know how to use these features effectively. I’ll discuss a few of these concepts in this post.
Note: If you prefer to write CSS, you can work directly in Code View. In this post, I’ll show how to use the CSS Designer and features in Live View to write the CSS to center text content.
The “Before” page
I’ve created a few simple examples (I didn’t want to distract anyone with my awesome design skills) on how you can center text. First, here’s the “Before” page with an
h1 main heading, 2
h2 subheadings, and 3 different paragraphs of text. I’ll use this page as a basis to apply the different centering techniques.
Create a CSS file
Before you do any of the examples below, make sure to create a CSS file in your DW site, or project.
How to do this in Dreamweaver:
- Go to the CSS Designer panel (Window > CSS Designer).
- Click the Plus (+) icon in the Sources section and select Create a New CSS File.
Figure 1. Select to create a new CSS file
- Name the CSS file and add a .css file extension (styles.css is pretty standard) and click OK.
Figure 2. Name the CSS file
Figure 3. Make sure the CSS file is selected
Center one text element at a time – H1
Say, for example, you want to center ALL of your h1 — main level headings the same way. That’s easy enough to do with what is called an element selector in CSS. An element selector is one in which the name of the CSS rule matches the name of the HTML tag you want to style.
For example, if I want to style all
h1 HTML tags the same way, I can create an
h1 CSS element selector.
How to create an element selector to center the
h1 in Dreamweaver:
- Click the Add Selector (+ icon in the Selectors section in the CSS Designer).
Figure 4. Add a selector
- Type h1 in the field and press return or enter.
Figure 5. Type the selector name
- Click the Text (T) category in the Properties panel.
Figure 6. Select the Text category
- Find the text-align property and click the center icon.
Figure 7. Center text
- Notice the
h1heading is now center aligned.
Note: I added the background color separately so it would stand out a bit better against the white background of this post.
Center one text element at a time – P
I can follow the same steps to center ALL of my p, or paragraph, text. In this case, I would create a selector called p and apply the same text-align property.
Note: I clicked Show Set in the Properties section to show only the properties I defined for the p selector.
Figure 8. Center paragraph text
You can see here that all of the paragraph text on the page is now centered.
Center different sections of text
So, using element selectors is fast and easy. But, perhaps you don’t want ALL of your
p tags, or other text elements for that matter, to be styled the same way. Well, we can create a class selector for that.
You can name a class selector just about anything you want. It just has to start with a dot (.). In this example, I’ll create a class selector in the CSS Designer called
.centerText and then, I’ll center-align the text in the properties.
FIgure 9. Create a class selector
I have a class selector, but it’s not doing anything until I tell it what to do. But, I can do that now. I’ll use my same starting example to assign the class selector to different parts of the page — the 2nd h2 and the 3rd paragraph to be exact.
Live View has a feature I can use to assign class selectors to different parts of my page. To do assign a class selector:
- Click on the section in Live View and click the Add Class/ID (+) button.
Figure 10. Add Class/ID
.centerText– notice as you start typing, Dreamweaver displays a list of possible selector names. Highlight
.centerTextand press Return or Enter to commit the change.
Figure 11. Apply class selector
- Notice that ONLY the first h2 text is now centered.
Figure 12. Use class selectors to style specific sections
- Apply the class selector to specific parts of the page (e.g., the 3rd paragraph).
Figure 13. Apply class selectors throughout the page
The final result shows that using class selectors lets you style ONLY the sections you want to style.
Center blocks of text
Sometimes you may want to center an entire section of text at one time rather than styling small sections at a time. For this example, I’ll keep the
.centerText selector intact, but I removed it from the h2 and p tags from the previous example. What I’ll do now, is group the h1 and first paragraph so that I can center both sections at the same time.
First, I’ll wrap the h1 and first paragraph into an HTML
<div> tag. A
div element is a generic container. It doesn’t mean anything until you apply CSS to it, but it is helpful when you want to apply the same styling to a section of your page that has different parts in it.
There are a few ways I could wrap this content, but I’ll work with the code, while in Split View so I can see the updates to the design in Live View simultaneously.
- Highlight all of the code from the opening
<h1>tag to the closing
</p>tag of the first paragraph.
Figure 14. Highlight
- Go to the Insert panel (Window > Insert), select the HTML category, and then Div.
Figure 15. Select the Insert panel and HTML category
- Make sure Wrap around selection is selected in the Insert drop down and click OK.
Figure 16. Wrap the div tag around the selection
<p>tags are now wrapped inside of the
Figure 17. Content now wrapped in a div
Now that the content is wrapped in the <div>, we can apply the .centerText class selector to it.
Figure 18. Apply class selector to a div
And, here is the final result: