text-align: center; won't work

kimla · September 10, 2007

Hi. Quick question here.

I want to center the whole page. I've tried with text-align: center; on body and #wrapper, but no luck. Any ideas?

PS: #wrap2 is only i cry for help, I guess I don't need it.

style

/* Div's */
#wrapper
{
width: 100%;
border: 1px solid #000000;
text-align: center;
}

#wrap2
{
width: 1020px;
border: 1px solid #000000;
}

#header
{
width: 100%;
height: 255px;

border: 1px solid #000000;

background: url('../img/banner/Dapskjoleutleie.jpg');
background-repeat: no-repeat;
background-position: center;
}

#menu
{
width: 100%;

border: 1px solid #000000;
}

#main
{
width: 100%;

border: 1px solid #000000;
}

#footer
{
width: 100%;

border: 1px solid #000000;
}

/* Pre-defined */

img
{
border: none;
}

body
{

}

index.php

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>tittel</title>
</head>
<body>
<div id='wrapper'>
	<div id='wrap2'>
		<div id='header'>

		</div> <!-- header end -->
		<div id='menu'>
			<img src='img/menu/but_utleiekjoler.jpg' alt='Utleiekjoler' />
			<img src='img/menu/but_leveringsbetingelser.jpg' alt='Leveringsbetingelser' />
			<img src='img/menu/but_priser.jpg' alt='Priser' />
			<img src='img/menu/but_kontakt_bestilling.jpg' alt='Kontakt/bestilling' />
			<img src='img/menu/but_div.jpg' alt='Diverse til salgs' />
		</div> <!-- menu end -->
		<div id='main'>
			MAIN
		</div> <!-- main end -->
		<div id='footer'>
			FOOTER
		</div> <!-- footer end -->
	</div> <!-- wrap2 end -->
</div> <!-- wrapper end -->
</body>
</html>

calabiyau · September 10, 2007

Eliminate your "wrapper" div and give your wrapper2 div a margin-left: auto; margin-right: auto; in your css.

FridayRain · September 11, 2007

#wrap2
{
        margin: 0 auto;
width: 1020px;
border: 1px solid #000000;
}

ToonMariner · September 11, 2007

text-align is for aligining text NOT for controlling layout!

as the others show - margin is the bunny for this job..

bronzemonkey · September 11, 2007

You can also use a "hack" to get this layout centered in those old POS browsers.

/*CSS*/

body {text-align:center; /*part1 of the centering hack*/}
#wrap2 {margin:0 auto; text-align:left; /*part2 of the centering hack*/}

dbrimlow · September 11, 2007

Don't drop the #wrap2, this is what will control the "centering" - along with the content within it.

You have all of your other elements using 100% widths. So why not specify a percentage width for your #wrap2, as well.

This way, the centering will always be relative to the window (#wrapper) with 5% left and right margins.

If you also designate either "em" or percentages for your font sizes, you will now have what is known as a "flexible" layout.

Flexible layouts are cool because if the user changes their BROWSER'S text size (larger or smaller), YOUR text size will also auto adjust - (along with, and while maintaining) your site's visual layout. Here is what I recommend changing:

#wrapper:

Drop the border. This is just a window container to allow you to center your #wrap2 in relation to it.

Drop the text-align altogether. By default let all text align left so you can specify a class for centering text later if you want. Give it 0 margins.

#wrap2:

Change the width to percent. 90%, 80%, 88% whatever looks good to you.

Give it a top and bottom margin of "0" and right and left margin of "auto"

Keep the border - this is where it belongs, not in #wrapper.

#header:

Put a background color that comes closest to the main color in your background image. Use css shorthand for background (like you would for border) syntax is: "backgound:#color url(../images/image.gif) center no-repeat".

Here is how the above will all look.

#wrapper
{
width: 100%;
margin:0;
}

#wrap2
{
width: 90%;
        margin:0 auto;
border: 1px solid #000000;
}

#header
{
width: 100%;
height: 255px;
border: 1px solid #000000;	
background: #add a color here url('../img/banner/Dapskjoleutleie.jpg') center no-repeat;

}

Good luck.

*a note about Flexible vs. Liquid (usually misunderstood as the same thing).

A flexible layout is for what I described ... maintaining layout containers and text relative to each other when a user adjusts their browser text-size (larger or smaller).

Liquid layout is a whole other thing - and EXTREMELY difficult and advanced (particularly the graphics).

A "true" liquid layout will adjust the entire website (graphics and all!) to maintain text-size, layout containers, graphics, bullets, etc. regardless of the size of the screen.

For a liquid layout, there cannot be a single "fixed" element size anywhere within the css (unless you want to specify a min/max width or height.)

While you can imagine the text and layout being easy (like in a flexible layout), imagine how you would have to make graphics that can auto-adjust, as well!

The trick is to use a larger graphic than required as a background image. Obviously if the screen is smaller, most of the image is hidden within the container, but when the screen is larger, the image must be large enough to still be visible when the container is suddenly larger, as well.

That's why most "true" liquid layouts use graphics with either za repeating pattern or shape that maintains its look when stretched or shrunk.

Sign In

text-align: center; won't work

Recommended Posts

kimla

Link to comment

Share on other sites

calabiyau

Link to comment

Share on other sites

FridayRain

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

bronzemonkey

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information