Question

html:

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

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;
}

---

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.

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?

Answer 1

If you don’t mind some markup change:
http://jsfiddle.net/BMEXR/30/

HTML:

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

CSS:

div.childContents a {
   margin-right: 2em;              
}
div.childContents{
   background-color:white;
   height: 25px;
   width: 900px;    
}
div.parent {
   border: 1px solid red;
   height: 100px;
   background-color: #bbb;
   display:table-row;
}
div.childContainer {
   border: 1px solid lightblue;
   background-color: transparent;
   vertical-align:middle;
   display: table-cell;
}