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?

[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.