How do you center your web page

**Justin90** · November 17, 2011

buyatvsonline.com

That's what I'm trying to make it center like... i want the whole page to be centered, nothing left aligned.

I've googled several pages telling me how to do this but apparently I cant get it right.

Can someone show me how to do this? where to place the code etc... I'm trying to learn HTML and this is something I want to do before I proceed with other things like designing the rest of my website.

I'd really appreciate it, thanks

**Tripredacus** · November 17, 2011

Presuming you're using div as containers, and as an example your div is called 'content' then this CSS is all you need:

#content {
margin: 0px auto;
}

EDIT: You ARE using a containing DIV (holder) and ALREADY have the the appropriate centering code in your CSS for that object.

Edited November 17, 2011 by Tripredacus

**Justin90** · November 18, 2011

How do I apply that css code though? I'm not sure I'm doing this right...

here is my code so far.

<html>

<head><title> removed for forum purposes </title><meta name="description" content="removed for forum purposes" /><meta name="keywords" content="removed for forum purposes" /><meta name="robots" content="index, follow"><meta name="revisit-after" content="2 month"> <link rel="stylesheet" type="text/css" href="stylesheet-css.txt"></head>

</div></body>

</html>

_________

ok with that bit being shown as that is...

I have

*{

margin:0;

padding:0;

}

body{

text-align:center; /*For IE6 Shenanigans*/

}

#wrapper{

width:960px;

magin:0 auto;

text-align:left;

}

saved in to a text document, named stylesheet.txt

...

What am I doing wrong?

**Justin90** · November 18, 2011

I got it to center at 100% using HTML code, but as I expected, it looks bad unless the window is full screen. This is what I did.

<div id="wrapper" style="

width: 1000px;

height: 150px;

margin-left: 250px;

margin-right: 150px;

"><table bgcolor="#92B7CB" border="10" width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td bgcolor="#92B7CB" valign="middle">

</td></tr></tbody></table></div>

Is there a way to alter this to make it where it will go center and not be off when not full screen, or does it have to be css to do it that way

**Kelsenellenelvian** · November 18, 2011

css is DEFINATLY the way to go.

**Justin90** · November 18, 2011

Yeah I know that now after researching but I can not figure this out... I don't understand why it isn't working. I wish some coding wiz could help me out

Edited November 18, 2011 by Justin90

**Tripredacus** · November 18, 2011

Are you making some new website or something? The one you put in your first post is already coded to center the page content. I'm wondering what you're trying to accomplish here.

**bristols** · November 18, 2011

How do I apply that css code though? I'm not sure I'm doing this right...
here is my code so far.
<html>

First things first - to avoid variations in how your page displays across different browsers, every HTML page you create should start with something called a DOCTYPE. A DOCTYPE just tells the browser that it should expect your page's code to be written according to a certain standard. See, not all HTML is the same - at least, it can be written according to different standards. There's more than one standard of HTML, and so there are a number of different DOCTYPEs to match. Use a search engine to search for "html doctypes". Below, I've chosen a Transitional DOCTYPE that hopefully will suit your needs. The 'DOCTYPE declaration' should be the first line of HTML code for each of your pages, coming before even the HTML element:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Actually this is an XHTML DOCTYPE. When using this kind of DOCTYPE the HTML element should look like this:


<html xmlns="http://www.w3.org/1999/xhtml">

rather than just


<html>

saved in to a text document, named stylesheet.txt

Whoa there - CSS files must end with the .css file extension, not .txt or anything else. Save your stylesheet.txt file as a CSS file, so that it's called stylesheet.css instead.

OK, below is the code for your example HTML file, and it's accompanying CSS file. Hopefully it solves your problem. (By the way, I've added some filler content to the HTML):

HTML file


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title> removed for forum purposes </title>
	<meta name="description" content="removed for forum purposes" />
	<meta name="keywords" content="removed for forum purposes" />
	<meta name="robots" content="index, follow" />
	<meta name="revisit-after" content="2 month" />
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	<style type="text/css">
	</style>
</head> 

<body>

<div id="wrapper">

<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>
<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>
<p>blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... blah blah here's some content... </p>

</div>

</body>
</html>

CSS file


*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

Note that the link in the head part of the HTML to your CSS file has been updated to reflect the fact that your CSS file should end with the .css file extension.

Edited November 18, 2011 by bristols

**blackturbokitty** · March 5, 2012

A very simple way of doing this is put this in the head of your HTML file

<style>

body {

text-align: center;

}

</style>

It should align all the elements on the page. This should help you if all you're looking for is to learn the basics.

Edited March 5, 2012 by blackturbokitty

**submix8c** · March 5, 2012

<style>
body {
text-align: center;
}
</style>

CSS=Cascading Style Sheet (see previous post). Read up on the more useful CSS and DIV methodology. Although I agree with the stmt "very simple way"...

p.s. Nov 2011? I believe this has already been "solved".

Edited March 5, 2012 by submix8c

Sign In

How do you center your web page

Recommended Posts

Justin90

Link to comment

Share on other sites

Tripredacus

Link to comment

Share on other sites

Justin90

Link to comment

Share on other sites

Justin90

Link to comment

Share on other sites

Kelsenellenelvian

Link to comment

Share on other sites

Justin90

Link to comment

Share on other sites

Tripredacus

Link to comment

Share on other sites

bristols

Link to comment

Share on other sites

blackturbokitty

Link to comment

Share on other sites

submix8c

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Activity

Browse