Center H1

Posted on 2011-10-08
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="" 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
    LVL 8

    Expert Comment

    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

    You could also get rid of the div and just do the following:

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

    Expert Comment

    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 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

    Perfect!  Thank You.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

    760 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

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now