[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Center H1

Posted on 2011-10-08
Medium Priority
Last Modified: 2012-05-12
I need to center the green heading <h1> on line 12, but I am having trouble including both styles.  Please advise if possible.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Lab 3-1b</title>
<div><h1 style="color:green">BEAUTIFUL BACKYARDS</h1></div>
Beutiful Backyards is a new company in town, and we are eager to get your business.  Please take some time to review our simple backyards.

Open in new window

Question by:rtod2
  • 2

Expert Comment

ID: 36937205
In your div container place
style="margin-right: auto; margin-left: auto; text-align: center;"

This is not necessarily the answsser, but it could be where you bgin.
I strongly advise you do a little searching on the following text
  centering a div

I hope this helps.
LVL 14

Accepted Solution

quizwedge earned 2000 total points
ID: 36937208
You could also get rid of the div and just do the following:

<h1 style="color:green; text-align:center;">BEAUTIFUL BACKYARDS</h1>

Expert Comment

ID: 36937213
I will note a couple things for you..
while its deprecated, you will still see in transitional (and even strict) markup the old
align="center" used in a div, typically for rearward compatibility with older browsers, but also sometimes to help overcome centering challenges none-the-less.  I am not saying its recommended, only that you will still see it 'out there'.

One of the contemporary methods is to us the margin left/right auto setting, however, the result will depend on several other things falling into place...
 - is the div occupying the full width of the page section its in
 - is it doing so, or not, in conjunction with, or not, cascading 'width' settings for its parent container ?

How a container width style responds is connected to its relationship with its parent.
I only mean to point it out ...so that you can be mindful to be looking for discussions on this sort of thing as you hunting out learning materials for gaining a proper over-view, which I think is beyond the scope here.

Again, I hope this helps (a little more ;^).

Author Closing Comment

ID: 36939683
Perfect!  Thank You.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question