Placing elements at the middle of their ancestor

HTML & CSS
1

Hi everyone
The following code contains a “body” ancestor element and two child elements: “Startpage” and “main”.
I wanted to place “Start Page” which is a brown image excactly at the middle of “body” so i made it an “Absolute”
position with “margin:auto”, assuming “auto” centers an element.
I wanted “main” to be horizontally centered on “Body” and on top of “Startpage” so I made it an “Absolute” position with
margin top: 40 px and left/right: “Auto”.
Attched is the code and a screenshot.
Would anyone please tell me why the brown “startpage” element and the “main” as well are not centered ?!
What do I have to do to center it?
Thanks a lot !


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
html, body, div, ul {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body
	{
		background-image:url('background.gif');
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center;
		text-align:center;
		position:relative;
	}
#startpage
	{
		position:absolute;
		margin:auto;
		width:960px;
		height:498px;
		background-image:url('startpage.png');
		background-repeat:no-repeat;
		background-position:center;
    }
#main {
	position:absolute;
	width:950px;
	height:30px;
	margin:40px auto 0;
	border:2px solid #8c8b4b;
}
#main li {
	width:92px;
	height:30px;
	float:left;
	list-style-type:none;
	border:2px solid red;
}
li.menu1 { background-image:url('images/men1.png'); }
li.menu2 { background-image:url('images/men1.png'); }
}
</style>
</head>
<body>
<div id="startpage"></div>
<ul id="main">
		<li><a href="#">menu item1</a></li>
		<li>menu item2>menu item1</li>
</ul>
</body>
</html>
2

Margin:auto does work to center elements witih a width. Though they must be static blocks. You have position:absolute on it. However you can just do this to center it :). Basically move it over 50% and drag it back over left to center.

#startpage{
[LIST]
[*=-12][COLOR=#C80000]margin-left[/COLOR]: -480px;
[*][COLOR=#C80000]left[/COLOR]: 50%;}

[/LIST]

3

Hi,

This article shows you how to vertically centre a fixed width and height element without using absolute positioning.

However fixed height and width sites are seldom of any use apart from displaying a static image, a small sire with little content or (god-forbid) a splash page.

Are you sure that you really want a fixed height to your design?

4

Thanks Ryan and Paul,
I haven’t yet implemented your suggestions but to Paul’s question, my answer is: If you mean whether I can get rid of “width/height” (if that is what you mean “static image”) answer is yes, in particular if it helps centers elements with less headaches.
Thanks

5

Yes that’s what Paul meant. Defining widths on elements isn’t bad to do, most of the time. However, heights are really frowned upon. They restrict elements (what if you text re-size and it overflows the container?). It’s just not a good design practice. Vertical centering can still be done (via Pauls link) :). If you have difficulty implementing what he suggests in his link, just shout :).

6

Hi Paul and Ryan,
What I gathered from that article is: I should work with floating left element.
Thanks a lot (unless i’m wrong !)

7

Er, generally speaking, and structurally speaking, you should try to avoid absolute positioning to lay your site out. Which often means, instead, floating. So yes, you could say that was a major point of the article :).

We can just go with that notion for now :).

8

Thank you Ryan,
I’ll proceed by “floating” and see if I get anywhere :slight_smile:
Thanks a lot