How To Have The Div Aligned In The Middle, And Relative To Its Parent?

[itran]

The HTML:

 

<div class="parent">
<div>
 <a href="">First Page</a><a href="">Second Page</a><a href="">Third Page</a>
</div>
</div>

 

 

The CSS:

 

div.parent > div > a {
margin-right: 2em;		
}
div.parent {
border: 1px solid red;
height: 100px;
background-color: #bbb;
}
div.parent > div {
border: 1px solid lightblue;
background-color: #fff;

height: 40px;
width: 900px;

display: block;
float: default;
margin: 0 auto 0;
}

 

The Example:

The result of the stylesheet can be seen on JSFiddle: http://jsfiddle.net/BMEXR/2/

 

Notice: The colors and spacings are set for better differentiating.

 

 

The Question Again:

How can the div be aligned in the middle, and that relative to its parent?

 

So that the div will move relative to the height setting of the parent div?

Edited December 10, 2012 by itran

[Love2c0de]

Just played around with your code and it seems to be working now how you want (I think).

 

Check it out: http://jsfiddle.net/BMEXR/44/

 

You can add any width to the parent div now and your links will always align to the center. This is because your unordered list is spanning 100% of the parent but what really makes it work is setting the text-align: center style. However large your unordered list area is, setting text-align to center will ensure it is always centered within the div.

 

Hope this is your desired result!

 

Kind regards,

 

AotB.

Edited December 11, 2012 by AoTBuNgLe