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?