applying text-align rule to html tag

**paulcj2** · Sep 7, 2007, 15:15

In "Transcending CSS the fine art of web design" (pp. 159-160) I read that one can apply the css rule text-align:center; to the html element to center the body thus:

Code:

html { 
text-align : center; }

body {
width : 770px;
margin : 0 auto;
text-align : left;
}

In this way one can avoid an extra outer container or wrapper div.
Yet it does not seem to work here:http://www.clickbasics.com/2.0_Plan/...transcend_css/

What am I missing?

**lkagan** · Sep 7, 2007, 17:44

Paul,

Silly mistake. You forgot your body tag!

**paulcj2** · Sep 7, 2007, 18:17

Please clarify. The <body> tag is in the html immediately after the </head> tag.

**Dark Tranquility** · Sep 7, 2007, 18:30

Your CSS says

Code CSS:

text-align :left;

and you want to apply

Code CSS:

text-align:center;

Or are you meaning that

Code CSS:

text-align :left;

does not work? may be because you have a space between the : and left

**paulcj2** · Sep 7, 2007, 18:56

Code:

html { 
text-align : center; }

body {
width : 770px;
margin : 0 auto;
text-align : left;
}

The html tag is supposed to align what's inside it to the center. Then the body tag is supposed to align what's inside it to the left.

**lkagan** · Sep 7, 2007, 19:01

My mistake. Saving the file w/ Firefox changes formatting and modifies the markup:

Here's the line after saving the html file locally:

HTML Code:

<link rel="stylesheet" type="text/css" href="Storyteller_files/layout.css"></head><body>

Very different from viewing source.

**paulcj2** · Sep 7, 2007, 19:26

I shuffled the CSS file and all is working well. Thanks for the suggestions, guys.

**paulcj2** · Sep 7, 2007, 19:30

I also added a line to the CSS:

Code:

body {
width : 770px;
margin : 0 auto;
text-align : left;
}

It is now:

Code:

body { 
position : relative; 
width : 770px; 
margin : 0 auto; 
text-align : left; }

and it works at:
http://www.clickbasics.com/2.0_Plan/...transcend_css/

**felgall** · Sep 7, 2007, 20:08

If you override text-align:center for html with text-align:left for the body then the html definition is redundant since you can't have text outside of the body to appear on the page in any case.

So all you really need is:

Code:

body { 
position : relative; 
width : 770px; 
margin : 0 auto;}

Should work even in antiquated browsers like IE6 provided that you use a proper doctype.

Even the position:relative is only needed if you are overlapping elements in the page using position:absolute.

The SitePoint Forums have moved.

User Tag List

Thread: applying text-align rule to html tag

Thread Tools

Display

applying text-align rule to html tag

Bookmarks

Bookmarks

Posting Permissions