Forums

begetolo

Hi,

I'm making a website that has a fixed width en height. Is it possible to center this vertically? Horizontal is easy using a pagewrap with margin: 0 auto. I didn't find anything about vertical center.
Thanks.

cybershot

I always use the margin.

margin:0 auto centers the site, this is true. the 0 is the up and down, the auto is the left and right. You could do

margin:100px auto; 100 being whatever number from the top you need it to be

begetolo

Thanks for your reply.

I thought of that, but this isn't what i want. I would like to center dynamically, just like horizontal center. So when you scale the browser window, the content flows with it.
For example if you have a website with say 500px width and height and you would like to position this exactly in de middle of the browser window. How could this be done in CSS?
I know of a method using a table (using vertical-align on <TR>) but i would like to use only CSS for my page-layout. The reason for this is that my users will be able to select a different layout (CSS Selector). Use of a table would mess things up.

by the way: why doesn't "margin:auto auto;" work? :(

greetings Bert

(Sorry for my bad english, it's not my native language :oops: )

Chocopunk

Hi you can specify a margin-top using percent.
Something like : margin-top:15%;

begetolo

Look at this code snippet:


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
<html>
	<head>
		<title>Center contents</title>
		<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
	        <style type=\"text/css\">
			* {
				margin:		auto;
			}
			#page-wrap {
				padding:	       10px;
				border:		#333333 thin solid;
				width:		500px;
				height:		300px;
			}
		</style>
	</head>
	<body>
		<div id=\"page-wrap\">
			<h1>Header</h1>
			<p>contents</p>
		</div>
	</body>
</html>

The 'box' is centered horizontally, but not vertically. Any comments?

gr. Bert

begetolo

"Chocopunk" said:
Hi you can specify a margin-top using percent.
Something like : margin-top:15%;

Thanks for your reply.
How would this solve my problem?

gr. Bert

Argeaux

havent tried it myself, but it looks like its working:

http://d-graff.de/fricca/center.html

begetolo

"Argeaux" said:
havent tried it myself, but it looks like its working:

http://d-graff.de/fricca/center.html

Thanks a lot. I'll have a look at this. Looks just what i needed.

gr. Bert

begetolo

a big cheers to Chris :D
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

gr. Bert

treehouse : what would you like to learn today?

Forums

Vertical Alignment