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.

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